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

Posted

技术标签:

【中文标题】使用自定义标头 ReactJS 获取 GET 请求【英文标题】:Fetch GET Request with custom headers ReactJS 【发布时间】:2017-08-09 06:53:58 【问题描述】:

我正在尝试向 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-urlhttps://github.com/taylorhakes/promise-polyfill

我在这里缺少什么?在我看来,这一切都是正确的。

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

【问题讨论】:

看看这个。我几乎可以肯定它与CORS有关:***.com/questions/27915191/… 【参考方案1】:

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

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

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

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');
);

【讨论】:

【参考方案2】:

接受的答案是我的解决方案,我没有使用 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;
             

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

【讨论】:

以上是关于使用自定义标头 ReactJS 获取 GET 请求的主要内容,如果未能解决你的问题,请参考以下文章

获取 API、自定义请求标头、CORS 和跨域重定向

对 PHP API 的 Axios GET 请求不适用于自定义标头

使用flash发送带有自定义标头的POST请求

芝加哥老板的 simple_bridge 可以获取请求自定义标头吗?

对 Django 的请求中缺少自定义标头

如何使用 python 请求模块创建自定义标头