redux isomorphic fetch Access-Control-Allow-Origin

Question

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.

Ah.... I didn't know that CORS needed to be configured on the webs service side.I did a quick search and found this https://www.playframework.com/documentation/2.4.x/CorsFilter. After implementing this the problem was fixed. — Knows Not Much, Mar 07 '16 at 06:12
Possible duplicate of [XMLHttpRequest cannot load https://www.\[website\].com/](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com) — Quentin, Jan 22 '18 at 12:30

score 3 · Answer 1 · edited Nov 07 '16 at 14:53

3

look at me,this works

you must use

let header = new Headers({
        'Access-Control-Allow-Origin':'*',
        'Content-Type': 'multipart/form-data'
});

instead of

let defaultOptions = {
    url:'',
    method:'POST',
    mode: 'cors',
    headers:{
        'Access-Control-Allow-Origin':'*'
    },
    body:null,
};

to enable cors

edited Nov 07 '16 at 14:53

Choxx

945
1
24
46

answered Nov 07 '16 at 11:09

小神经

39
2

score 2 · Answer 2 · edited Jan 22 '18 at 16:48

2

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())

edited Jan 22 '18 at 16:48

tchap

3,412
3
29
46

answered Jan 22 '18 at 12:25

Nitin verma

31
3

1

This prevents the error from showing up by *removing the attempt to **read** the response entirely*. Since the code **needs** to read the response, this doesn't solve the problem. – Quentin Jan 22 '18 at 12:29

score 1 · Answer 3 · answered Jul 29 '16 at 08:18

Access-Control-Allow-Origin is something you can control at client side. It is a security restriction for browsers that requires to be negotiated with the server.

A server can retrieve data from any end-point, but for browser apps this is different. For security reasons you are only allowed to load data via XHR from the same server you have loaded the web page. If you need to load data from a different server (say an external API) the browser requires that server responds indicating you are allowed.

See description in the "Cross Domain Request" section on http://www.acuriousanimal.com/2011/01/27/working-with-the-javascript-xmlhttprequest-object.html

score -2 · Answer 4 · answered Mar 26 '16 at 03:08

-2

You can read this https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

fetch(url[, init])

set the init param to allow cross-domain request

try

answered Mar 26 '16 at 03:08

Leafer

11

redux isomorphic fetch Access-Control-Allow-Origin

4 Answers4