React JS - CORS 在发送 POST 请求时缺少允许 Header

Question

我在向 REST-API 发送 POST 请求时遇到一些问题。

问题是，当我从 React 应用程序发送它时，它在 firefox 的调试控制台中显示了这个错误。

有趣的是，用邮递员发送请求时它工作得很好。

这是我用来发出请求的代码：

let apiURL = API_URL_BASE + "/api/authenticate"
        let requestBody = JSON.stringify(
            {
                "username": this.getEnteredLoginUsername(),
                "password": this.getEnteredLoginPassword()
            }
        );
        let headerData = new Headers();
        headerData.append('Accept', '*');
        headerData.append("Access-Control-Allow", "*");
        headerData.append('Content-Type', 'application/json');
        headerData.append('Access-Control-Allow-Origin', '*');
        headerData.append("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
        headerData.append("Access-Control-Allow-Headers", "*");
        
        let requestOptions = {
            method: 'POST',
            mode: 'cors',
            redirect: 'follow',
            body: requestBody,
            headers: headerData
        }
        this.setState({loadingData: true});
        fetch(apiURL, requestOptions).then( response => {
            let responseStatus = response.status;
            response.json().then( responseJSON => {
            });
        });

我希望有人能帮助我。

这是 firefox 控制台显示的错误：Image

Answer 1

您似乎确实从 client-side（即浏览器）收到了正确的请求 header，但是托管 API 的服务器也必须向客户端发送响应返回表明它允许 cross-origin 请求，否则浏览器将不会继续处理您的请求。从服务器设置 cors headers 将取决于您为后端使用的框架。事实上，您需要将您在此处添加的那些 cors header 添加到服务器代码中。

示例响应 header 如下所示：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: * (Note: * means this will allow all domains to request to your server)
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

快递可以按这个link.

关于 CORS 的更多信息 here

React JS - CORS 在发送 POST 请求时缺少允许 Header

React JS - CORS Missing Allow Header when sending POST request

javascript

http-post