Sometimes while hitting an API gateway you get error suggesting 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.
In such a case, sometimes people suggest to set the request mode to 'no-cors' like so:
fetch(url, {
mode: "no-cors",
...
})
But if you're getting CORS issues this is not the solution. If the API endpoint is something that you control, then you have to fix those CORS issue there. If the API endpoint is not something that you control, then you have to proxy your request through a server that does have CORS enabled.
You need to remove the mode: 'no-cors' setting from your request. Setting no-cors mode is exactly the cause of the problem you’re having. A no-cors request makes the response type opaque. The log snippet in the question shows that. Opaque means your frontend JavaScript code can’t see the response body or headers.
With no-cors — JavaScript may not access any properties of the resulting Response
So the effect of setting no-cors mode is essentially to tell browsers, “Don’t let frontend JavaScript code access the response body or headers under any circumstances.”
People sometimes try setting no-cors mode when a response doesn’t include the Access-Control-Allow-Origin response header or else because the request is one that triggers a CORS preflight, and so your browser does an OPTIONS preflight. But using no-cors mode isn’t a solution to those problems. The solution is either to:
- configure the server to which you’re making the request such that it sends the Access-Control-Allow-Origin response header, and such that it handles OPTIONS requests
- or set up a CORS proxy using code from https://github.com/Rob--W/cors-anywhere/ or such; see the How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
- Temporarily you can also use Chrome extension of Enabling CORS. But it is for debugging phase only.
However, it is evident that sometimes you clearly need to Enable CORS on a resource. You can do this using the API Gateway console.
To enable CORS support on a REST API resource
Sign in to the API Gateway console at https://console.aws.amazon.com/apigateway
Choose an API.
Choose a resource under Resources.
In the Resource details section, choose Enable CORS.
Next Steps/settings In the Enable CORS box:
- (Optional) If you created a custom gateway response and want to enable CORS support for a response, select a gateway response.
- Select each method to enable CORS support. The OPTION method must have CORS enabled.
- If you enable CORS support for an ANY method, CORS is enabled for all methods.
- In the Access-Control-Allow-Headers input field, enter a static string of a comma-separated list of headers that the client must submit in the actual request of the resource. Use the console-provided header list of 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' or specify your own headers.
- Use the console-provided value of '*' as the Access-Control-Allow-Origin header value to allow access requests from all origins, or specify origins to be permitted to access the resource.
- Choose Save.
After this, deploy the API again and see the fun in next call!
