-1

I want to get api_kye and I use moqui framework in backend , use axios in react js project :

     axios.get(SERVER_URL + '/rest/api_key', {
        headers: {
            Authorization: "Basic " + btoa(username + ":" + password) ,
            'Content-Type' : 'application/x-www-form-urlencoded' ,
        },
    }).then(response => {})

then , when requested the below error happened :
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.

m.mahdi_rasouli
  • 82
  • 1
  • 1
  • 7
  • 1
    Well your server doesn't specify your current domain as "allowed". Are you doing this from localhost? do you have control over the server? – i.brod Jan 06 '22 at 19:10
  • 2
    well, what is the origin of your request? and which origin is allowed? Those two values have to be exactly the same. Or you allow all origins – derpirscher Jan 06 '22 at 19:10
  • 1
    This error happens when requested url and the window url has different origin. Plese check if both are same. For details https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy – Hridoy Jan 06 '22 at 19:11
  • 1
    Do you understand CORS? Based on the error message, it is enabled on your backend but misconfigured. Add your backend's CORS config to your question. – jub0bs Jan 06 '22 at 20:10
  • yes , there is no problem , I can send request in my localhost without any problem , and see my error and understand that the address that exist in from origin part of error not same to header has a value address of error they are different just in one "/" – m.mahdi_rasouli Jan 07 '22 at 07:45
  • So your allowed origin header contains a trailing `/`? Something like `https://example.com/`? If yes, remove that slash ... The value in the `Origin` header and the value in the `Allowed-Origin` header have to be ***exactly the same*** (or `Allowed-Origin` can also be `*` which will allow *all* origins) – derpirscher Jan 07 '22 at 13:23
  • thanks , I corrected the origin but now 401 (Origin not allowed) happens – m.mahdi_rasouli Jan 08 '22 at 07:44

4 Answers4

0

This is not a reactJS error, this is a problem with your backend code, you need to look at the Moqui docs to see how you can allow the origin you are calling from to access your API

Duenna
  • 2,186
  • 2
  • 14
  • 17
0

Enable CORS in the server side

Let's head back to our server's app.js file.

app.get('/cors', (req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
    res.send({ "msg": "This has CORS enabled " })
});

Also check the redirect URL in server side

Refer this link

Thyagi
  • 190
  • 1
  • 6
  • IF you control the server. – sao Jan 07 '22 at 16:15
  • If you look at the error message, you will see, that CORS obviously is already enabed on the server (though seemlingly allowing a wrong origin). Furthermore, this piece of code enables CORS exactly for that one call. – derpirscher Jan 07 '22 at 16:50
0

when ever you send an HTTP request to an API the server response should include your domain in response header otherwise chrome will raise this error: "Access to XMLhttprequest has blocked for origin ...."

so first of all make sure that your domain is included in server code. if it's included already then the reason could be that server can't process your response correctly. maybe it crashed so the response is corrupted and chrome can't find your domain in response header and it raises that error

TheEhsanSarshar
  • 2,677
  • 22
  • 41
0

So i have a solution for this but you may or may not be able to build it.

CORS is a security feature, you should be receiving requests thru your backend and not the browser directly in general...

IF the data is not sensitive and you want to open an endpoint to the world without getting CORS errors you can do one of two things

  1. Set the CORS headers from the server side. You'll need to understand HTTP requests and headers. you set these from the server. enabling cross origin with * will work.

  2. Build a proxy. I've done this in AWS API gateway, I'll link another post. works good. basically AWS will act as your back end and take the response with CORS blocked. you will then proxy the request and strip the CORS header. When you call the api you will actually call AWS which calls the API, then AWS will pass the response back to you with CORS enabled.

Angular No 'Access-Control-Allow-Origin'

just follow these steps and it will work.

sao
  • 1,835
  • 6
  • 21
  • 40
  • If you look at the error message, you will see, that CORS obviously is already enabed on the server (though seemlingly allowing a wrong origin). – derpirscher Jan 07 '22 at 16:50