为什么我的ReactJS应用程序对http请求抛出CORS错误，尽管它们在Postman应用程序中成功完成？[副本]

Question

代码：

function App() {

    useEffect(() => {

        axios({
            url: 'http://____/user/list',
            method: 'GET',
            dataType: 'json',
            headers: {
                'Authorization': '______',
            },
        })
        .then( res => {
            console.log('| response |', res)
        })
        .catch( error => {
            console.log('| error |', error);
        })

    }, [])

    return (
        <div></div>
    )
}

错误：

访问位于“”的XMLHttpRequesthttp://___“起源”http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。

我知道我正在向一个与我的页面所在域不同的域发出XMLHttpRequest，邮递员直接调用“POST”请求，但我们首先发送一个“选项”请求。浏览器或服务器是否出于安全原因阻止了它？我是否缺少客户端或服务器端的任何内容？

Answer 1

问题是这些域不匹配，这与CORS不匹配。服务器需要处理选项请求，并使用表示可以发出请求的适当标题进行回复。您可能需要在服务器上添加一个访问控制允许源站响应头。您还需要处理访问控制允许标题。来自选项的响应应类似于：

OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type


HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

你可以在MDN：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS上阅读更多关于CORS的信息