redux isomorphic fetch Access-Control-Allow-Origin

user_337134 0
Viewed 16972

I have written a redux application which I am running locally using webpack-dev-server. (port 8080). I am trying to connect to a web service which is running locally at port 9000.

My code to connect to the web service is as follows

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`)
  .then(response => response.json())
  .then(json =>
    dispatch(receivedDimensionAttributesSuccess(dimensionName, json))
  )
  .catch(error =>
    dispatch(receivedDimensionAttributesError(dimensionName, error))
  );

This receives an error

Fetch API cannot load http://localhost:9000/movies/yearlist. No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'http://localhost:8080' is therefore not allowed access. If an opaque response 
serves your needs, set the request's mode to 'no-cors' to fetch the resource 
with CORS disabled.

I googled for the problem and found this thread

Access Control Allow Origin header not present with fetch api call

but I don't like the solution which involved switching to a different library/middleware altogether.

How can I solve the problem with the isomorphic fetch library.

redux reactjs
4 Answers

you can simply add {mode:'no-cors',} to disable the No 'Access- Control-Allow-Origin' header. For more information you can refer the following url :

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`**,{mode:'no-cors'**,})
  .then(response => response.json())
user_84446220
Related