获取GET请求与自定义标题ReactJS

Question

我试图向API发送GET请求，但当我在代码中添加自定义头时，发生了一些奇怪的事情。在某个地方，请求方法在到达web服务器时会更改为选项。

但是当我在没有标题的情况下执行相同的操作时，它将是一个GET类型。当我使用应用程序postman（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
    })

html prettyprint-override"><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-响应url
https://github.com/taylorhakes/promise-polyfill

我错过了什么？在我看来这一切都是正确的。

我使用火狐开发版测试Reactjs应用程序运行它与NPM启动

Answer 1

您可能想安装corsnpm包https://www.npmjs.com/package/cors 在您拥有http://localhost:8080/api/app节点应用程序正在运行。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests有关于这里发生的事情的详细信息：您的appID和Authizationkey请求标头触发您的浏览器在发送GET之前发送CORS预飞行OPTIONS请求。

要处理该OPTIONS请求，您可以安装corsnpm包，并按照https://www.npmjs.com/package/cors#enabling-cors飞行前对其进行配置：

var express = require('express')
  , cors = require('cors')
  , app = express();
app.options('*', cors()); // include before other routes
app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});

Answer 2

被接受的答案告诉我解决方案，我不是使用nodeJS后端，而是使用带有phpfpm的普通Nginx。

但是答案解释了一个具有自定义头的请求如何总是首先执行一个选项请求来验证对设置头名称的接受，因此我必须更改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;
             }
}

我知道这还远远不够完美，但现在它已经成功了。再次感谢你为我指明了正确的方向。