使用自定义标头ReactJS获取GET请求 [英] Fetch GET Request with custom headers ReactJS

问题描述

我试图将GET请求发送到API，但是当我在代码中添加自定义标头时，发生了奇怪的事情。
当请求方法到达Web服务器时，请求方法会变为OPTIONS。

但是当我不使用标头执行相同操作时，它将是GET类型。
当我使用应用程序邮递员（API开发工具）时，请求运行正常！

请求代码：

< pre class = snippet-code-js lang-js prettyprint-override> 让令牌= this.generateClientToken（privateKey，message）; let myheaders = { appID：appID， authorizationkey：令牌} fetch（'http：// localhost：8080 / api / app / postman'，{方法： GET，//正文：JSON.stringify（' '），标头：myheaders}）。then（function（response）{console.log（response.status）; // =>数字100–599 console.log（response.statusText）; // =>字符串控制台.log（response.headers）; // =>标头console.log（response.url）; // =>字符串return response.text（）}，function（error）{console.log（error.message） ; // =>字符串}）

 < 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应用

解决方案

您可能要安装 cors npm软件包 https://www.npmjs.com/package/cors 在您拥有 http：// localhost：8080 /的服务器上api / app 节点应用正在运行。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 包含有关此处发生情况的详细信息：您的 appID 和 authorizationkey 请求标头触发您的浏览器发送CORS预检 OPTIONS 请求，然后发送 GET 。

处理该选项请求，您可以安装所有 cors npm软件包，并按照 https://www.npmjs.com/package/cors#enabling-cors-pre-flight 进行配置：

  var express = require（'express'）
，cors = require（'cors'）
，app = express（）; 
 app.options（'*'，cors（））; // //在其他路由之前包含
 app.listen（80，function（）{
 console.log（'启用了CORS的网络服务器监听端口80'）; 
}）; 
  

I am trying to send a GET request to a API but when i add custom headers in the code somthing strange happens. Somewhere the request method changes to OPTIONS when it reaches the web server.

But when i do the same without headers it will be a GET type. When i use the application postman (API development tool) the request works fine!

request code:

    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>

Server log ouput (with headers):

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" "-"

Server log output (without headers):

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" "-"

Added the NPM modules for fetch support in extra browsers:
https://github.com/github/fetch#obtaining-the-response-url
https://github.com/taylorhakes/promise-polyfill

What am i missing here? It all looks correct to me.

I am using firefox development edition to test the Reactjs app by running it with NPM start

解决方案

You probably want to install the cors npm package https://www.npmjs.com/package/cors on the server where you have your http://localhost:8080/api/app Node app running.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has details about what’s happening here: Your appID and authorizationkey request headers are triggering your browser to send a CORS preflight OPTIONS request before sending the GET.

To handle that OPTIONS request, you can install the cors npm package and follow the instructions at https://www.npmjs.com/package/cors#enabling-cors-pre-flight to configure it:

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

这篇关于使用自定义标头ReactJS获取GET请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！