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

Ste*_*ker 8 javascript node.js cors reactjs fetch-api

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

但是当我在没有标题的情况下执行相同操作时,它将是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
    })
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

服务器日志输出(带标头):

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" "-"
Run Code Online (Sandbox Code Playgroud)

服务器日志输出(不带标头):

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" "-"
Run Code Online (Sandbox Code Playgroud)

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

我在这里失踪了什么?这对我来说都是正确的.

我正在使用firefox开发版来测试Reactjs应用程序,通过运行NPM启动它

Ste*_*ker 5

接受的答案将我视为解决方案,我没有使用 nodeJS 后端,而是使用带有 php-fpm 的普通 Nginx。

但是答案解释了带有自定义标头的请求如何始终首先执行 OPTIONS 请求以验证是否接受了设置的标头名称,因此我必须更改网络服务器中的响应以返回包含正确标头的 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;
             }
}
Run Code Online (Sandbox Code Playgroud)

我知道它远非完美,但现在它使它起作用。再次感谢您为我指明了正确的方向。


sid*_*ker 3

您可能想在运行 Node 应用程序的服务器上安装corsnpm 包https://www.npmjs.com/package/corshttp://localhost:8080/api/app

\n\n

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests详细介绍了此处发生的情况:您的appIDauthorizationkey请求标头正在触发您的浏览器发送 CORS 预检OPTIONS 请求在发送GET.

\n\n

要处理该OPTIONS请求,您可以安装npm 包并按照https://www.npmjs.com/package/cors#enabling-cors-pre-flightcors中的说明进行配置:

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