How to fix CORS policy error when sending axios get request?

Question

I've tried many different approaches from what I've searched on here to try to solve the issue, but none of them have worked so far.

When I add no headers I get the following header:

However, when I do add them I get this error instead:

I've tried just adding the domain as proxy in package.json as I used create-react-app, but no luck.

import axios from 'axios';

export default function getResponse(xappToken){
    console.log(xappToken);

    axios.get('https://api.artsy.net/api/v1/artists/popular', {
       headers: {
         'Access-Control-Allow-Origin': 'http://localhost:3000/',
         'X-Access-Token': xappToken,
         'Accept': 'application/json',
       }
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     })
     .then(function () {
       // always executed
     });
}

API documentation: https://developers.artsy.net/v1/playground#/artists/getApiV1ArtistsPopular

What do you mean *"just adding the domain as `proxy`"*? The dev server's proxy only handles requests that *actually go to it*, requests to another domain won't hit it at all. — jonrsharpe, Apr 13 '20 at 15:59
Check out this answer https://stackoverflow.com/a/10636765/7557538 — Stephane Janicaud, Apr 13 '20 at 16:00
@jonrsharpe yeah, I realised that after reading the documentation. — Winsome, Apr 13 '20 at 16:15
The artsy URL in both console.log screenshots don't look right. There is a api.artsy.net and localhost in the same URL — Ben Butterworth, Apr 13 '20 at 16:21

score 1 · Accepted Answer · answered Apr 13 '20 at 16:10

You misunderstand what CORS is. The CORS headers cannot be set by the browser, they are response headers (from the server), not request headers (from the client). This issue arises because the domain you are requesting from has not allowed the origin in the browser to request that resource.

Artsy is probably doing this as a security feature: they don't want other websites loading their resources that are not expressly added. You probably don't have access to the server code of Artsy. You can probably add your app URL somewhere in their console/ dashboard/ admin. Perhaps there is a localhost setting somewhere as well then you can turn on whilst you develop it. Or you can edit your HOSTS file so that your webpage url (http://example.com) routes to 127.0.0.1

Ah, this all makes sense now! Looking at the dashboard there is a place to add that in, but 3am me decided I did no need to do that. Thank-you, I think toggling the developer tools for now is fine and I can add the proper URL in the app when I host it somewhere. — Winsome, Apr 13 '20 at 16:22
Oh great, I've never used Artsy, but they're all the same I guess :D — Ben Butterworth, Apr 13 '20 at 18:58

How to fix CORS policy error when sending axios get request?

1 Answers1