使用仅提取选项创建获取请求即发送

时间:2017-06-14 13:37:23

标签: javascript ecmascript-6 request http-get fetch-api

我正在尝试使用Fetch创建一个get请求。请求如下所示:

fetch('https://requestb.in/14ikb6j1', {
  method: 'get',
  headers: {
    'Authorization': 'Token token=xxxxx'
  }});

如果我向自己的服务器发出此请求,则每次都会在选项请求中失败。我无法弄清楚原因。

如果我向requestbin发出此请求,则首先会有一个选项请求。但是,在收到选项响应后,永远不会发出实际的get请求。

这就是requestbin收到的:

OPTIONS /14ikb6j1

HEADERS

Referer: http://localhost:9000/
Host: requestb.in
Total-Route-Time: 0
Via: 1.1 vegur
Accept-Encoding: gzip
Cf-Visitor: {"scheme":"https"}
Cf-Ipcountry: NL
Cf-Ray: 36edd35d1cad2b28-AMS
Cf-Connecting-Ip: 37.153.231.90
Connection: close
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept: */*
Connect-Time: 1
Access-Control-Request-Method: GET
Content-Length: 0
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
X-Request-Id: 69b120c1-0f18-454b-a7fd-91f082252a06
Access-Control-Request-Headers: authorization
Origin: http://localhost:9000

这就是chrome日志:

chrome dev tools

最奇怪的是,我得到200 - OK状态作为结果。但是,控制台仍记录此信息:

  

Fetch API无法加载https://requestb.in/14ikb6j1。回应   预检请求未通过访问控制检查:否   请求中存在“Access-Control-Allow-Origin”标头   资源。因此不允许来源“http://localhost:9000”   访问。如果不透明的响应满足您的需求,请设置请求   模式为'no-cors'以获取禁用CORS的资源。   :9000 /#/ branchching:1 Uncaught(in promise)TypeError:无法获取

但如果我使用Postman发出此请求,它确实有效:postman request

GET /14ikb6j1
HEADERS

Cf-Ipcountry: NL
Cf-Ray: 36eddb797ebf7223-AMS
Authorization: Token token=xxxx
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Total-Route-Time: 0
Via: 1.1 vegur
Connection: close
Cf-Connecting-Ip: 37.153.231.90
Connect-Time: 0
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Postman-Token: 57486701-6f9a-4aab-be1b-776f0d376920
Accept: */*
Host: requestb.in
X-Request-Id: 73a7a35e-0d89-41fd-b760-2aa952349871
Accept-Encoding: gzip
Cf-Visitor: {"scheme":"https"}
Cache-Control: no-cache

如何使用身份验证标头生成此请求?

1 个答案:

答案 0 :(得分:2)

这可能是一个CORS问题。您正在查询请求的服务器不允许来自其他域的请求。 检查浏览器控制台并查找错误。你可能会发现这样的事情:

  

Fetch API无法加载description。回应   预检请求未通过访问控制检查:否   请求中存在“Access-Control-Allow-Origin”标头   资源。因此不允许来源“enter image description here”   访问。如果不透明的响应满足您的需求,请设置请求   模式为'no-cors'以获取禁用CORS的资源。