无法使用axios执行post请求，返回未经授权的401错误

Question

我使用Redux、React和Node从头开始创建了一个身份验证服务。一切都很好，直到我把我的帖子部分复制到我的BackEnd上。redux部分我想还可以。我的问题是当我发送授权承载令牌时。我可以用失眠来发帖了。但是，当我尝试使用web应用程序发布帖子时，我无法做到。这是我的操作：

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

  const headers = {
    header: {
      'Content-Type' : 'application/json',
      'Accept' : 'application/json',
      Authorization: `Bearer ${token}`
    }
  };
  const response = await AlleSys.post('/posts', {...formValues, headers})
  // dispatch({type: CREATE_POST, payload: response.data})

userId是我的JWT标记。

我已经在后台设置了Cors

const corsOptions ={
    origin:'http://localhost:3000',
    credentials:true,            //access-control-allow-credentials:true
    optionSuccessStatus:200
}
app.use(cors(corsOptions))

关于失眠症。同样的要求也适用于失眠。

​

​

​

对于失眠，我使用的是与我的应用程序相同的持有者令牌，所以问题不在于JWT。

Answer 1

使用GET、POST、PUT、DELETE从Nodejs服务器或Insomnia查询端点将导致在检查选项之前调用。

但是浏览器会将HTTP请求限制在相同的域中，这会使您遇到CORS问题。由于Insomnia不是浏览器，CORS只是一个浏览器安全限制，所以它没有受到限制。

从您正在使用的CORS的docs：

某些CORS请求被认为是“复杂的”，需要一个初始的OPTIONS请求(称为“飞行前请求”)。“复杂”CORS请求的一个示例是使用除GET/HEAD/POST之外的HTTP谓词(例如DELETE)或使用自定义头的请求。要启用飞行前处理，必须为要支持的路线添加新的选项处理程序：

因此，我认为您应该在所有路由之前包含app.options('*'，cors())，并将其放在要首先处理的文件的顶部。

Answer 2

我将我的代码更改为：

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

  const headers = {
    authorization: `Bearer ${token}`
  };
  const response = await AlleSys.post('/posts', {...formValues}, {headers})

并且成功了！