【问题标题】:Creating a get request using fetch - only options is send使用 fetch 创建获取请求 - 仅发送选项
【发布时间】:2017-11-16 16:54:37
【问题描述】:

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

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

如果我向自己的服务器发出此请求,则每次在选项请求上都会失败。我不知道为什么。

如果我向 requestbin 发出这个请求,首先会有一个选项请求。但是,在接收到 options 响应后,永远不会发出实际的 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 记录的内容:


最奇怪的是,我得到了一个200 - OK 状态作为结果。然而,控制台仍然记录这个:

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

但是如果我使用 Postman 提出这个请求,它确实可以工作:

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

如何使这个带有身份验证标头的 get 请求正常工作?

【问题讨论】:

  • 'Content-Type': 'application/json' 用于 GET 请求。对吗?
  • @Forivin 对不起,你是对的。已更新,删除这些内容类型标头不会改变任何内容。

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


【解决方案1】:

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

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

【讨论】:

  • 但是如果 cors 被禁用,为什么我的邮递员请求会起作用?
  • 因为邮递员没有域。它就像一个普通用户打开一个网站一样。作为浏览器扩展邮递员获得这些特权,该网站无法自行获得。这是浏览器内置的一个简单的安全功能,可防止网站 A 与网站 B 通信,除非网站 B 可以接受。
猜你喜欢
  • 2018-07-12
  • 2019-04-30
  • 2020-11-24
  • 2019-10-24
  • 2019-07-18
  • 2021-03-22
  • 2016-06-03
  • 2020-11-04
  • 1970-01-01
相关资源
最近更新 更多