fetch请求出错

Question

有两个错误
Uncaught (in promise) TypeError: Failed to fetch

Failed to load 'url链接' Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这是代码
url那里我原来放的是后台给的地址

fetch('url',
{
 method: 'POST',
 headers: {
           'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({"password": values.password})
}).then(res => res.json()).then(json => console.log(json));

Answer 1

因为你 'Content-Type': 'application/json'这样配置，所以触发了跨域中的预检请求。后端配置Access-Control-Allow-Headers不够的，后端还需要单独对预检的option请求单独处理.具体为什么，可以参考这篇文章

Answer 2

如果是开发测试的话可以考虑装一个:allow-control-allow-origin:*插件(chrome)
https://chrome.google.com/web...

如果后台是nginx服务器的话 有可能需要在nginx中配置
比如:

add_header Access-Control-Allow-Origin $http_origin; 
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
add_header Access-Control-Allow-Headers 'App-User-Agent, App-IDENTIFIER'; #自定义的header

Answer 3

把url 上面的两个单引号去掉先

fetch('url', //**这个url字符串，不是变量，**
{
 method: 'POST',
 headers: {
           'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({"password": values.password})
}).then(res => res.json()).then(json => console.log(json));

Answer 4

需要后端配置Access-Control-Allow-Headers
跨域了