-1

I have a react app, in which I am trying to make an API call using fetch() method.

fetch("https://example.com/user"); something like this. but it is throwing an error like below.

from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

my project is running on localhost:3000 and calling API like https://example.com/user.

I kept Access-Control-Allow-Origin: *

fetch("https://example.com/user", {
  headers: {
    "Access-Control-Allow-Origin": "*"
  })

but got below error.

Access to fetch at 'https://example.com/user` from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

tried mode:no-cors

fetch("https://example.com/user", {
  headers: {
     "mode":"no-cors"
  })

but got same error i.e.

Access to fetch at 'https://example.com/user` from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

for both options

fetch("https://example.com/user", {
  headers: {
     "Access-Control-Allow-Origin": "*"
     "mode":"no-cors"
  })

got the below error.

Access to fetch at 'https://example.com/user`' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Umesh Sulakude
  • 286
  • 2
  • 14
ram
  • 237
  • 2
  • 14
  • You have to set the CORS from API – underscore Aug 25 '22 at 10:19
  • 1
    you can add `"proxy": "https://example.com"` inside package.json and then call `/user` in fetch or use [http-proxy-middleware](https://www.npmjs.com/package/http-proxy-middleware) – Usama Aug 25 '22 at 10:20
  • 2
    You cannot control CORS policy with fetch configuration in browser. You can either modify your API to add your localhost to allowed hosts list, either to use CRA Proxy feature: https://create-react-app.dev/docs/proxying-api-requests-in-development/ – Sergey Sosunov Aug 25 '22 at 10:20
  • @usama, when tried `"proxy": "https://example.com"` is not starting `npm start` and giving error `Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string.` – ram Aug 25 '22 at 10:44
  • [This link](https://create-react-app.dev/docs/proxying-api-requests-in-development/#invalid-host-header-errors-after-configuring-proxy) may help you which is the section from the link posted in above comment. OR check [this answer](https://stackoverflow.com/a/70413065/13405106) – Usama Aug 25 '22 at 10:56

2 Answers2

-1

Enable CORS in the API Gateway console and added 'Access-Control-Allow-Origin' to "Access-Control-Allow-Headers" and click "Enable CORS and replace existing CORS Header" button.

OR

change setting of CORS, you need to change setting of API Gateway to Access-Control-Allow-Origin= '*'

Umesh Sulakude
  • 286
  • 2
  • 14
-2

It's a security problem to get api request outside of other domains. CORS is related for API, not frontend. In order to accept your request from localhost:3000, CORS header should be set in API part.

Andrew Wang
  • 42
  • 1
  • If that is the case, then what is the use of these options "Access-Control-Allow-Origin": "*" "mode":"no-cors". These are also mentioned in mdn docs. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch – ram Aug 25 '22 at 10:23
  • it's for server part configuration. – Andrew Wang Aug 25 '22 at 10:25
  • 1
    @ram - You're misunderstanding what `no-cors` means. it doesn't mean "bypass the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy) for me." That would make the SOP completely pointless. It means (loosely) "I know this is a cross-origin request and I won't see the response; that's okay. Also, don't bother with preflight." [More here](https://stackoverflow.com/questions/52569895/fetch-api-why-use-the-no-cors-mode-if-the-response-is-opaque). – T.J. Crowder Aug 25 '22 at 10:35