How to add CORS headers to fetch request

Coding Help
#1

Here is a screenshot of my current code that I have. It is a GET request to a site, which is defined by query.
image
However I keep getting errors that say this:

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.

I’ve tried reading and watching tutorials but they’re quite confusing and don’t necessarily use node-fetch (as in my example). I would appreciate some help here

#2

Are you querying a server you control or is it from a third-party?

#3

It is from a third-party.

#4

You mentioned using node-fetch but the error you’re getting reads to me as a client browser error, could you clarify where this code is running?

If it’s node-fetch on the server I’m afraid I don’t really know how to help. On the client side though, CORS is a browser specification that prevents client side JavaScript from fetching resources from origins that differ from the user’s current origin unless the server hosting the requested resource explicitly permits it.

CORS is a confusing standard, I’d recommend the Mozilla Developer Docs to learn more of the specifics:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

As it relates to your project, if this is client side code, there’s not a lot you can do. It appears as though the third party resource you’re querying has enabled CORS and that your domain is not approved. The Fetch API allows for opaque requests which ignore CORS but you wouldn’t be able to use .json() on the response, among other limitations. There are services that allow you to route a CORS bound request through a server that removes the CORS limitation but that’s not a viable approach in all scenarios.

2 Likes
#5

Add some logic to your application to make the request from the server side. Server side code doesn’t run in an origin and isn’t bound by the same-origin policy; thus, it doesn’t need CORS headers. If you’re using something like express, you can add a route to expose the result to the client. The request to that would then be same-origin, so you wouldn’t need CORS headers there either.

1 Like
#6

Sorry for the lack of clarification regarding where my request is coming from, it was client side. So I used your suggestion to route the request through this service and it worked! Thank you very much for the help.

1 Like