Handling CORS from a thirdparty API

Question

I'm a bit new to react and I am trying to fetch Crypto data from the Nomics API. I read their documentations and used axios for my GET request like so:

fetchChartData(currency, start) {
    const data = {
      key: "key",
      currency: currency,
      start: start
    }

    return axios({
      method: "get",
      url: API_URL + '/exchange-rates/history',
      headers: {
        "Access-Control-Allow-Origin": "*",
        crossorigin: true
      },
      data
    })
  }

For which I get:

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

So I decided to use Moesif Origin and CORS changer

Access to XMLHttpRequest at 'https://api.nomics.com/v1/exchange-rates/history' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
It does not have HTTP ok status.

I don't know why it is being blocked because it says "localhost requests are always allowed to ease development" in the documentation.

[![Nomics docs on CORS][1]][1]

My other attempts of fixing this are adding stuff to the headers and proxy. My proxy went like this, (never proxy-ed before):

const API_URL = `https://cors-anywhere.herokuapp.com/https://api.nomics.com/v1`

fetchChartData(currency, start) {
    const key = "key";

    return axios({
      method: "get",
      url: API_URL +
        '/exchange-rates/history?' +
        `?key=${key}
          &currency=${currency}
          &start=${start}` 
    })
  }

With proxy, however, I just get a 401 (Unauthorized). [1]: https://i.stack.imgur.com/zIT7L.png

Answer 1

The Problem

The problem is that the domain you're using does not match the domain that the API is expecting for development. A domain is identified for CORS purposes (also known as the Same Origin Policy) based on three parts: protocol, host, and port. Using the following domain: https://example.com, I'll explain these three parts below:

1. Protocol - http or https depending on if security is enabled on the domain. For our example it would be https.

2. Host - for the example above this would be example.com.

3. Port - The default ports are typically: 80 for http and 443 for https. In our example, our port is 443.

It's important to know the information above so that you can identify the problem in your code snippet. The documentation notes that localhost is always supported for development. However, your domain http://localhost:3000 does not match the documentation because the ports are different.

The Fix

You'll need to run your application locally at http://localhost (default port 80) for the API call to succeed and pass the CORS preflight test. I don't see it noted above, but if the documentation requires a secure localhost environment then you'd want to run your application locally at https://localhost (default port 443). In addition, you'd probably have to create a self-signed SSL certificate for this to work properly.