react使用fetch api获取到了jwt返回的token然后带上该token继续请求报错

Question

外层fetch获取到了token，里面的fetch报错，并且请求头里面没有传输的Authorization。

let token;

fetch('http://192.168.188.128:9080/user/login', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'zhangjh',
    password: 123,
  }),
})
.then(res => res.json())
.then((json) => {
    token = json.token;
    fetch('http://192.168.188.128:9080/user/userid', {
      method: 'post',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: token,
      },
    })
    .then(res => res.json())
    .then((data) => {
        console.log(data);
      })
     .catch(err => console.log(err));
 })
 .catch(err => console.log(err));

Answer 1

谢谢大家已解决，我的写法是没问题的，原因是后台把第二个请求的cors禁用了，然后是响应头Access-Control-Allow-Header没有包含Authorization，导致跨域请求不成功和请求头不通过两种错误。

Answer 2

headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    Authorization: token,
}

你这么写没问题？属性不应该有单引号或者双引号么？你这个根本没有进行请求就报错了吧 ！！！Authorization要加引号的吧。

headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': token,
 }

Answer 3

Hi, 我建议你可以试试以下方法：

1. 首先用postman测试下服务器是否正常工作，支持headers里面的内容。如果没有问题，我再定位到你fetch那段code。
2. 如果你使用OAuth是不是应该在token前面加上"Bearer " 或者其他的 ？
3. 还有你使用的post方法，类型是'application/x-www-form-urlencoded'，但是没有传递body ?

Answer 4

jwt token前面要加Bearer