CORS 策略已阻止从源“http://localhost:3001”访问“blahblahblah”获取

Posted 2023-02-22

【中文标题】CORS 策略已阻止从源“http://localhost:3001”访问“blahblahblah”获取

【英文标题】：Access to fetch at 'blahblahblah' from origin 'http://localhost:3001' has been blocked by CORS policy

【发布时间】：2020-06-07 21:30:12

【问题描述】：

我正在尝试获取一个 api，但我一遍又一遍地遇到相同的错误，我已经检查了服务器，从那里没有问题，如果你能帮助我，我正在徘徊。 这是我写的代码：

import React from 'react';


export default class FetchData extends React.Component 


    async componentDidMount() 
        var myHeaders = new Headers();
        myHeaders.append("Authorization", "sth");

        var requestOptions = 
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        ;
        fetch("blahblahblah", requestOptions)
            .then(response => response.json())
            .then(result => console.log(result))
            .catch(error => console.log('error', error));

    

    render() 
        return <div>
        </div>
    

【参考方案1】：

您需要在服务器中将您的域列入白名单。最简单的方法是使用 npm 包 cors 进行 cors 配置

【参考方案2】：

你知道CORS是什么意思吗？它的意思是（Cross-Origin Resource Sharing）看这个链接就明白了[https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS] 您的后端必须接受 CORS，并且当您在请求中发送凭据时，您还必须允许凭据

【参考方案3】：

解决方法有以下几种：

第一 - 您的网址在末尾添加此地址

https://cors-anywhere.herokuapp.com/YOUR URL

第二个-

查看此文档Proxying API Requests in Development

其他方式-

3 Ways to Fix the CORS Error — and How the Access-Control-Allow-Origin Header Works