Axios - CORS Policy Issue

Question

I am trying to make a simple axios request which look like this (i'm working with Vue.js):

axios
 .get(url),
 .then(({ data }) => {
    // ...
 })
 .catch(err => console.log(err))

But I get the following error:

Access to XMLHttpRequest at 'url' from origin 'http://localhost:8080' 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.

Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:84)

I have already tried adding the following headers, but it still doesn't work

headers: {
   "Access-Control-Allow-Origin": "*"
   "mode":"no-cors"
}

but if I try to make the request via browser (simply by copying and pasting the url) everything works fine.

Would anyone know how to help me? Thanks so much!

CORS warning is coming from the server not the client, in this case your axios call, can you give us a little more information on the backend that you are using, what you are defining as url should have CORS enabled for your request to work — Richard, Mar 27 '21 at 14:43
My url look like this: https://api.taapi.io/sma?secret=myApiKey&exchange=binance&symbol=BTC/USD&interval=1m. The API site is this: https://taapi.io/ — Filippo Amenta, Mar 27 '21 at 14:46
Change our code to use this url:https://jsonplaceholder.typicode.com/todos/1 , it is a placeholder response, and I believe it should work, as pointed before the CORS issue needs to be fixed on the server not the client, if you have control over the backend exposing the url you need to enable CORS there, is that node.js? — Richard, Mar 27 '21 at 14:52
The placeholder response works fine. I don't have the control of the backend. But why if I try to make the request via browser (simply by copying and pasting the url) everything works fine? — Filippo Amenta, Mar 27 '21 at 15:00
That's because what CORS checks are requests coming from a different origin to the one exposing the URL, like your client, if that's the case it check that other origin is authorized to fetch the resource. The browser is just rendering that resource from it's own origin not a crossed one. Read this article is pretty concise and well explained: https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues — Richard, Mar 27 '21 at 15:12

score 1 · Answer 1 · edited Mar 27 '21 at 15:33

Just summarizing the comments at the question

CORS stands for Cross-Origin Resource Sharing, what it check is that a given client or origin is authorized to "see" the resource at another origin. Just think that you don't want just anybody to openly access all your APIs right? With CORS you specify who can access what.

In your case this is NOT something that can be fixed at the vue client doing the axios call, you can check this by changing the request URL to something that does have CORS enabled like:

axios
 .get('https://jsonplaceholder.typicode.com/todos/1'),
 .then(({ data }) => {
    // ...
 })
 .catch(err => console.log(err))

To fix this the backend needs to enable CORS at a server level or for the specific url you are trying to access. That would depend on the actual backend implementation, but most languages have a straight forward solution for this.

As whether this works for you from a browser, but not from the axios request; That's because what CORS checks are requests coming from a different origin to the one exposing the URL, like your client. The browser is just rendering that resource from it's own origin not a crossed one. Read this article is pretty concise and well explained:

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

First of all, thank you very much for the time you are dedicating to me. I tried to make the request with node.js (always using axios) and not with Vue.js (I just created a javascript file and compiled it with node) and everything works great. How is it possible? Could it be a Vue problem? — Filippo Amenta, Mar 27 '21 at 15:37
Makes sense, that's like creating a reverse proxy where you are getting around the browser check and for the cross origin, and exposing the resource on your own terms, this answer explains a little on this: https://stackoverflow.com/questions/36958999/cors-is-it-a-client-side-thing-a-server-side-thing-or-a-transport-level-thin#:~:text=CORS%20is%20applied%20to%20requests,is%20included%20in%20the%20request.&text=When%20CORS%20is%20not%20enabled,origin%20as%20the%20loaded%20page. — Richard, Mar 27 '21 at 15:45
@FilippoAmenta if you look at @Jan’s answer, they have mentioned `The difference is, that in node.js context you do not have the browsers limitation of CORS`. Only browsers have to follow CORS and since with Node.js you are essentially creatinhg an API, the CORS issue will be invalid here. — Ajay Gupta, Mar 27 '21 at 15:47

score 1 · Accepted Answer · answered Mar 27 '21 at 15:38

Summing this up: If you do not own the API to enable CORS on the server side, but still would like to utilize that API, then you must write an API wrapper for your application.

That could be a node.js express api which just takes your requests and then forwards the requests (using axios) to the api. The difference is, that in node.js context you do not have the browsers limitation of CORS.

There are blueprints for that for example at netlify. You can also find plenty of examples with google.

Axios - CORS Policy Issue

2 Answers2