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?
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
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.
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"
})
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.
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.
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
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?
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
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.
Thanks for your answer, I’ll do check and of course try to learn more !
[удалено]
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" })
[удалено]
Yes, that's what I didn't understood, the access-control come from the server. I'll try witth XmlHttpRequest
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.
[удалено]
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.
That's it, get the answer on NodeJS
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
Nope, it’s not mine ! But I use a trick to get data from it