0

In my react-redux application, i am making service request via axios to my backend service api and i am fine here because i have full control of my backend services so i added "Access-Control-Allow-Origin: *" header in every response of my services. Please be noted that here my client and server hosted in different server domain.

But problem is that there is one service which will redirect to another xyz service resides in another domain where i do not have any control. Now xyz service will redirect back to my server on some validation(login session) and my server finally send the response to my react based client.

Here i am facing CORS error while redirecting xyz service resides in another domain where this xyz service does not send header "Access-Control-Allow-Origin: *".

How can i resolve this without changes in server side. Can i make 'Simple requests' as mentioned in https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS. I have tried this way but it is not working.

Please help me. Thanks.

AndroidKid
  • 189
  • 3
  • 14
  • Possible duplicate of [Understanding AJAX CORS and security considerations](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) – Adeel Imran Sep 28 '17 at 09:37
  • if the question is about using axios to make Cross-origin-requests, then sorry it cant be done wihtout server side changes. You can checkout another xhttp module called reqwest here -> https://github.com/ded/reqwest . Even this allows CORS only if browsers support it. – semuzaboi Sep 28 '17 at 09:55
  • @luciferous Thanks. so you mean reqwest also throw cors error for my case. – AndroidKid Sep 28 '17 at 10:06
  • Yup. Unless the xyz service has set the appropriate response headers or implemented JSONP (which i doubt) ! – semuzaboi Sep 28 '17 at 10:14

1 Answers1

0

In essence this error message means that your client detected a kind of security issue. It wants to warn you that even though the webpage is fetching data from server A, actually the website is not hosted on server A, but on server B.

And to fix this, you should look at webserver A (the one that hosts your rest services). That's where you need to add something. The server should actually send a kind of response that informs your client about the situation.

It's actually your backend which hosts the rest services that has to send a specific header to support the CORS.

Your client will actually visit your server 2 times.

  • First it will make a "preflight" to check which properties the web service has. That preflight should send a response with a bunch of HTTP headers. One of those headers informs the client about the allowed origins (allowed servers that the client can run on). That list of origins can be a wildcard (i.e. *) or a specific list of hostnames. That tells your client that it shouldn't worry about the problem.

  • Then the client makes a second connection to actually execute your service.

It's difficult to give you more information, because it depends on the kind of webserver you are using:

  • e.g. if you had a java backend with an embedded Jetty server (possibly also for other web servers), then you could define a filter those preflights and to send the correct headers in those cases. (CrossOriginFilter).
bvdb
  • 22,839
  • 10
  • 110
  • 123