ReactJs 中的 CORS 策略已阻止从源“http://localhost:3000”访问“http://example.com/myApi”获取答案

【问题标题】：Access to fetch at 'http://example.com/myApi' from origin 'http://localhost:3000' has been blocked by CORS policy in ReactJsReactJs 中的 CORS 策略已阻止从源“http://localhost:3000”访问“http://example.com/myApi”获取
【发布时间】：2020-09-01 19:02:07
【问题描述】：

我们正在尝试使用 reactJs 调用 Web API，但出现错误 Access to fetch at 'http://example.com/myApi' 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. in ReactJs

我们正在使用 ASP.Net WEB API，我们允许 cors 来自 web 和控制器，但仍然出现错误。

我的代码：-

class List extends Component{
    constructor(props)
    {
        
        super(props);
        this.state={
            listItem: [],
            isSuccess: false
           
        }
    }

   
    
    componentDidMount(){
        fetch('http://example.com/myApi',{
            'headers':{
                'Content-Type':'application/json',
                'Token':'PrimaryAuth'
            },
        })
         .then(res => res.json())
         .then(data => {
            console.log(data)
            this.setState({
                listItem: data
            })
         })  
    }
    render() {

        var { isSuccess, loginItems} = this.state;

        if(!isSuccess){
            return <div>Not Loading...</div>
        }
        else{
        return(
            <div className="List">

            <ul>
            {loginItems.map(item =>(
         <li key={item.message}>
             {item.message}
        </li>
        ))}
            </ul>


                </div>
        )
            
    }

    }
}

错误截图：-

【问题讨论】：

标签： javascript reactjs reactjs.net

【解决方案1】：

这与 React 没有任何关系。

如果您查看收到的错误，则表明预检请求（这是一个 OPTIONS 请求）没有返回，响应状态为 OK (200)。

所以我假设您实际上并没有在您的网络服务器上正确实现 CORS，因为您需要允许创建一个 OPTIONS 方法并以 200 对其进行响应。

我建议您更多地了解 CORS 以及如何正确处理它： https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：