React / jQuery - Why is the 'Access-Control-Allow-Origin' header refusing?

Question

I'm doing my best to understand how I'm still getting this error when following the CORS guide (that they recommend to follow themselves) on https://www.html5rocks.com/en/tutorials/cors/

The error I'm receiving is:

Failed to load https://bittrex.com/api/v1.1/public/getmarketsummaries: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Based on this, I'm thinking the issue is inside the $.ajax call?

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';

export default class TokenList extends Component {
constructor(props) {
    super(props);

    this.state = {
        object : []
        };
    }

    componentDidMount() {
        this.TokenList();
    }


    TokenList() {

// Method currently not working...

// Method 1
    $.ajax({
         type: 'GET',
         url: 'https://bittrex.com/api/v1.1/public/getmarketsummaries',
         contentType: 'text/plain',
         xhrFields: {
             withCredentials: false
         },

         success: function() {
            console.log('Access Granted!');
         },


// Error suggests the issue is here?
         headers: {
            'Access-Control-Allow-Origin' : 'http://localhost:3000'
         },

         error: function() {
             alert('Error making the request');
         }

     })
     }

That URL does not set a `Access-Control-Allow-Origin` header on the response. Your AJAX request cannot set it. — Alexander O'Mara, Dec 13 '17 at 05:18
There is one extension in chrome that will help you call external URL from localhost https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi — Nisarg Thakkar, Dec 13 '17 at 07:17

score 0 · Answer 1 · answered Dec 13 '17 at 08:33

There is a lot of confusion with CORS

but in the bottom line you do not set the CORS on the client side request.

The backend supposes to return in the response the proper headers.

like:

 headers: {
        'Access-Control-Allow-Origin' : 'http://localhost:3000'
     },

this should come from the backend, not by you setting it on the client.

If you are not controlling the backend, you will need to check what that provider sends.

React / jQuery - Why is the 'Access-Control-Allow-Origin' header refusing?

1 Answers1