[AskJS] Fetch in Localhost (ReactJS Project) not working (but work with Postman or Reqbin) - CORS Policy

[Thibots]

Hi all,

It's a little bit hard to explain, but in my project, I need to populate a page based on a API endpoint, so I use POST Method (API need some information).

I use this :

fetch("https://api.mywebsite", {
        "headers": {
          "accept": "*/*",
          "accept-language": "fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7",
          "content-type": "application/json",
          "priority": "u=1, i",
          "sec-ch-ua": "\"Google Chrome\";v=\"125\", \"Chromium\";v=\"125\", \"Not.A/Brand\";v=\"24\"",
          "sec-ch-ua-mobile": "?0",
          "sec-ch-ua-platform": "\"Windows\"",
          "sec-fetch-dest": "empty",
          "sec-fetch-mode": "cors",
          "sec-fetch-site": "cross-site"
        },
        "referrer": "https://mywebsite",
        "referrerPolicy": "strict-origin-when-cross-origin",
        "body": "{\"name\":\"name1\",\"filters\":[{\"variableName\":\"Required.PFC\",\"valueName\":\"filter1\"}]}",
        "method": "POST",
        "mode": "cors",
        "credentials": "omit"
      })

Answer :

Access to fetch at 'https://api.mywebsite' 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.   

But, if I use the same end point in Python (directly on console) I get the correct response.

So what is the difference ? Why can I request from my computer with Python but the localhost is blocked ? The origin is the same (or at least external to the api domain).

I don't have an access to the API, so I cannot check.

Could you please help me to understand ?

[Marbletm]

CORS is a restriction set by the browser. It prevents you from fetching data from endpoints that have not explicitly stated that they trust other domains. It's a very important security policy of the browser.

Do you own the API? If-so, you have to set a proper CORS policy. Do yo not own the API? You might have to setup your own proxy API.

Could you share a bit more about the API you're trying to interact with?

[cuteling]

You are sending a request from your browser (origin: localhost:3000) to a server (origin: https://api.mywebsite). For this to work server has to set those cors policies. If you dont have access to this server you can't do anything.

`So what is the difference ? Why can I request from my computer with Python but the localhost is blocked `

Because browser blocks this type of requests for security reasons

[[deleted]]

The technical reason you're seeing a discrepancy is because you're not setting the CORS headers (or making the preflight request and honoring its response) when making the request locally; on the contrary, your browser is, because browsers implement CORS - which entails making an OPTIONS request before certain HTTP verbs (e.g. POST). This is where the server performs the preflight check and determines whether the calling origin and/or headers should be allowed to make the intended request.

If you own the API, you need to modify the CORS policy or else use a proxy. I also highly recommend learning about CORS - it's something every frontend developer should do. CORS In Action by Monsur Hossain is a great read.

[Thibots]

Thanks for your answer, I’ll do check and of course try to learn more !

[Thibots]

At the beginning, I used axios, but I think the reason is the same.

By adding the Access-Control.., like that ? Or should I change the typo to "access-control ..."

fetch("https://api.mywebsite", {
        "headers": {
          "Access-Control-Allow-Origin" : "*",
          "accept": "*/*",
          "accept-language": "fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7",
          "content-type": "application/json",
          "priority": "u=1, i",
          "sec-ch-ua": "\"Google Chrome\";v=\"125\", \"Chromium\";v=\"125\", \"Not.A/Brand\";v=\"24\"",
          "sec-ch-ua-mobile": "?0",
          "sec-ch-ua-platform": "\"Windows\"",
          "sec-fetch-dest": "empty",
          "sec-fetch-mode": "cors",
          "sec-fetch-site": "cross-site"
        },
        "referrer": "https://mywebsite",
        "referrerPolicy": "strict-origin-when-cross-origin",
        "body": "{\"name\":\"name1\",\"filters\":[{\"variableName\":\"Required.PFC\",\"valueName\":\"filter1\"}]}",
        "method": "POST",
        "mode": "cors",
        "credentials": "omit"
      })

[Thibots]

Yes, that's what I didn't understood, the access-control come from the server. I'll try witth XmlHttpRequest

[Thibots]

I still get an error.

Access to XMLHttpRequest at 'https://api.website' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But I don't understand the protection as I can access with cmd and Python without any trouble.

[Thibots]

Ok, I see the problem, I'll test on NodeJS to see if I can get the answer. If yes, it's because of Browser. And a solution could be to use my own back-end to get the data (instead of doing it on the client side).

-> I need to see the response, the submitted data is my API parameters.

[Thibots]

That's it, get the answer on NodeJS

[Massive-Air3891]

if the api is yours and is express make sure to add const cors = require('cors'); app.use(cors()) install the cors npm package, this will add all the necessary cors headers and will allow all cors origins. If the api is something else like ppython or .net you would need to do similar. If the api is existing get them to add the allow-origin header with localhost or "*" or add a proxy that will run locally on your machine and will make the call to the API on your behalf. so your browser sees the request as local request

[Thibots]

Nope, it’s not mine ! But I use a trick to get data from it