Question

我正在尝试向API发送GET请求，但是当我在代码中添加自定义标头时，会发生奇怪的事情。某处，请求方法在到达Web服务器时会更改为OPTIONS。

但是当我在没有标题的情况下做同样的事情时，它将是一个GET类型。当我使用应用邮递员（API开发工具）时，请求工作正常！

请求代码：

    let token = this.generateClientToken(privateKey, message);

    let myheaders = {
      "appID": appID,
      "authorizationkey": token
    }

    fetch('http://localhost:8080/api/app/postman', {
      method: "GET",
      // body: JSON.stringify(''),
      headers: myheaders
    }).then(function(response) {
      console.log(response.status);     //=> number 100–599
      console.log(response.statusText); //=> String
      console.log(response.headers);    //=> Headers
      console.log(response.url);        //=> String

      return response.text()
    }, function(error) {
      console.log(error.message); //=> String
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

服务器日志输出（带标题）：

worker_1  | 172.18.0.4 -  17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403
web_1     | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-"

服务器日志输出（不带标题）：

worker_1  | 172.18.0.4 -  17/Mar/2017:16:01:49 +0000 "GET /index.php" 403
web_1     | 172.18.0.1 - - [17/Mar/2017:16:01:49 +0000] "GET /api/app/postman HTTP/1.1" 403 5 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-"

在额外的浏览器中添加了用于获取支持的NPM模块：
https://github.com/github/fetch#obtaining-the-response-url
https://github.com/taylorhakes/promise-polyfill

我在这里缺少什么？这对我来说都是正确的。

我正在使用firefox开发版通过NPM start

运行它来测试Reactjs应用程序

Answer 1

接受的答案游戏我的解决方案，我不是使用nodeJS后端，而是使用php-fpm的简单Nginx。

但是答案解释了具有自定义标头的请求将始终首先执行OPTIONS请求以验证是否接受设置标头名称，因此我必须更改Web服务器中的响应以使用右标头返回204代码包括在内。没有它会碰到我的PHP代码，其中认证失败并导致403代码，因为没有使用内容和请求方法的标头。

这是我添加到Nginx主机以使其工作的原因：

location ~ \.php$ {
             add_header 'Access-Control-Allow-Origin' "*";
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
             add_header 'Access-Control-Allow-Headers' 'appID,authorizationkey';

             if ($request_method = 'OPTIONS') {
                return 204;
             }
}

我知道它远非完美，但现在它已经成功了。再次感谢你指出我正确的方向。

Answer 2

您可能希望在运行cors节点应用的服务器上安装http://localhost:8080/api/app npm包https://www.npmjs.com/package/cors。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests详细了解此处发生的情况：您的appID和authorizationkey请求标头在发送{{1}之前触发您的浏览器发送CORS预检OPTIONS请求}}

要处理GET次请求，您可以安装OPTIONS npm包并按照https://www.npmjs.com/package/cors#enabling-cors-pre-flight上的说明进行配置：

cors

使用自定义标头ReactJS获取GET请求

2 个答案: