React / jQuery - 为什么“Access-Control-Allow-Origin”标头拒绝？ [复制]答案

【问题标题】：React / jQuery - Why is the 'Access-Control-Allow-Origin' header refusing? [duplicate]React / jQuery - 为什么“Access-Control-Allow-Origin”标头拒绝？ [复制]
【发布时间】：2018-09-25 12:30:31
【问题描述】：

我正在尽我最大的努力了解在遵循 CORS 指南（他们建议自己遵循）时仍然出现此错误的原因 https://www.html5rocks.com/en/tutorials/cors/

我收到的错误是：

无法加载https://bittrex.com/api/v1.1/public/getmarketsummaries：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://localhost:3000'。

基于此，我认为问题出在 $.ajax 调用内部？

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');
         }

     })
     }

【问题讨论】：

该 URL 未在响应中设置 Access-Control-Allow-Origin 标头。您的 AJAX 请求无法设置。
chrome 中有一个扩展可以帮助你从 localhost chrome.google.com/webstore/detail/allow-control-allow-origi/… 调用外部 URL

标签： jquery reactjs cors

【解决方案1】：

CORS 有很多混淆

但最重要的是，您没有在客户端请求上设置 CORS。

后端应该在响应中返回正确的标头。

喜欢：

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

这应该来自后端，而不是你在客户端上设置的。

如果您不控制后端，则需要检查该提供商发送的内容。

【讨论】：