CORS issues

[TeodorKolev]

Hello, I have cors issues, when I am trying to reach data from server. How can I handle it

Help us reproduce - tell us about your environment

1. Chrome Windows

Steps to reproduce

const dbUrl = 'http://localhost:3000/data';
export function getData() {
  const data = {
    method: 'GET',
    mode: 'no-cors',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    },
  };
  return async (dispatch) => {
    function onSuccess(success) {
      console.log(success);
      dispatch({ type: 'GET_DATA', data: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: 'GET_DATA_ERROR', error });
      return error;
    }
    try {
      const response = fetch(dbUrl, data);
      console.log(response)
      const responseJson = response.json();
      return onSuccess(responseJson);
    } catch (error) {
      return onError(error);
    }
  };
}

Expected result

Actual result

1. Uncaught (in promise) Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development

[mcnamee]

Hi @techmexdev
Would you mind trying the this answer - and letting us know how you go? I'm interested to know the answer.

[techmexdev]

@mcnamee Mmmh, did you mean to tag @TeodorKolev?

[mcnamee]

Sorry, yes @techmexdev - you must have come up as the first suggestion after the @!

[TeodorKolev]

If I add this to web.dev.config.js it cannot run. Throw errors

[TeodorKolev]

@mcnamee Can you show me some examples please?

[mcnamee]

The following example works for me (with nothing else changed):

As an example I put the following snippet in the fetchRecipes function in /src/containers/Recipes.

fetch('https://mcnam.ee/api/medium.json')
      .then(res => res.json())
      .then(d => console.log(d))
      .catch(e => console.log(e));

Loading in the browser (http://localhost:3001/recipes), the console outputs an object of articles.

Note that in order to allow CORS, my server has something like (Apache .htaccess):

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"