Javascript Fetch未发送自定义标头

我试图在fetch调用中发送一个自定义头，但由于某种原因，这些头似乎没有被发送。我发现一些问题似乎表明需要将“cors”模式设置为一个获取选项，但我尝试了一下，结果没有什么不同

在控制台中，我收到以下错误：

Fetch API cannot load http://localhost:8000/GroupRoutePermission. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但是，如果我从fetch请求中删除x-api-key头，我不会得到任何CORS控制台错误，也不会得到JSON响应——我的JSON错误表明api键未设置（如预期的那样）

我还使用带有x-api-key集的Postman实现了我的端点，它工作得很好。奇怪的是，我已经从我以前的一个项目中删除了下面的代码，在这个项目中，自定义头被发送得很好（即使没有cors模式），所以我不知道还有什么可以尝试的

let apiKey = ""
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey
else 
    window.location = "/login"

console.log(apiKey)

fetch(url,{
    credentials: 'include',
    mode: 'cors',
    headers: new Headers({
        'Content-Type': 'text/plain',
        'x-api-key': localStorage.apiKey
    })
})

Chrome网络选项卡请求标题：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,fr-CA;q=0.6,fr;q=0.4,en-CA;q=0.2
Access-Control-Request-Headers:x-api-key
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:8082
Referer:http://localhost:8082/lists/ResearchTrial
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36

已发送X-Api-Key的响应标头：

HTTP/1.1 200 OK
Host: localhost:8000
Connection: close
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1
Allow: GET,HEAD
Cache-Control: no-cache
Content-Type: text/html; charset=UTF-8
Date: Tue, 12 Sep 2017 19:30:58 GMT

如果在请求中删除X-Api-Key，则响应标头：

HTTP/1.1 200 OK
Host: localhost:8000
Connection: close
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1
Access-Control-Allow-Origin: http://localhost:8082
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-  Encoding, X-Api-Key
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Cache-Control: no-cache
Content-Type: application/json
Date: Tue, 12 Sep 2017 19:28:29 GMT

请帮忙

我已经从我以前的一个项目中删除了下面的代码，在该项目中，自定义头被发送得很好（即使没有cors模式），所以我不知道还有什么可以尝试的

let apiKey = ""
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey
else 
    window.location = "/login"

console.log(apiKey)

fetch(url,{
    credentials: 'include',
    mode: 'cors',
    headers: new Headers({
        'Content-Type': 'text/plain',
        'x-api-key': localStorage.apiKey
    })
})

该项目是否也提出了跨域请求

我的猜测是，当auth失败时，API将发送cors头，但当auth成功时，API将不发送头。这不会影响邮递员，邮递员不必担心cors

您应该能够在Postman中通过发送经过身份验证的请求并检查响应头来确认这一点

我已经从我以前的一个项目中删除了下面的代码，在该项目中，自定义头被发送得很好（即使没有cors模式），所以我不知道还有什么可以尝试的

let apiKey = ""
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey
else 
    window.location = "/login"

console.log(apiKey)

fetch(url,{
    credentials: 'include',
    mode: 'cors',
    headers: new Headers({
        'Content-Type': 'text/plain',
        'x-api-key': localStorage.apiKey
    })
})

该项目是否也提出了跨域请求

我的猜测是，当auth失败时，API将发送cors头，但当auth成功时，API将不发送头。这不会影响邮递员，邮递员不必担心cors

---

您应该能够在Postman中通过发送经过身份验证的请求并检查响应头来确认这一点。

是的，该项目也是跨域的。>我的猜测是，当auth失败时，API将发送cors头，但当auth成功时，API将不发送头。好主意，但是我在后端使用Laravel，我有单独的Cors中间件和Api密钥验证，Cors是收到请求后第一个运行的中间件。我再次尝试了Postman，运行包含和不包含Api密钥的请求，并且响应与预期的一样。响应的标题是相同的，而与身份无关？在Chrome（或任何浏览器）中都是一样的吗？我已经按问题编辑以显示带有/不带有发送的自定义标题的响应标题。我认为您最初的直觉可能是正确的。。。我认为当包含api密钥时，我的Cors中间件没有运行。。。为什么仍然待定。是的，该项目也是跨领域的。>我的猜测是，当auth失败时，API将发送cors头，但当auth成功时，API将不发送头。好主意，但是我在后端使用Laravel，我有单独的Cors中间件和Api密钥验证，Cors是收到请求后第一个运行的中间件。我再次尝试了Postman，运行包含和不包含Api密钥的请求，并且响应与预期的一样。响应的标题是相同的，而与身份无关？在Chrome（或任何浏览器）中都是一样的吗？我已经按问题编辑以显示带有/不带有发送的自定义标题的响应标题。我认为您最初的直觉可能是正确的。。。我认为当包含api密钥时，我的Cors中间件没有运行。。。为什么仍然待定。确实重复！感谢您链接到该问题/答案！真的复制！感谢您链接到该问题/答案！