时间戳

首页 > 解决方案 > 无法使用 axios 进行 post 请求，返回未经授权的 401 错误

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

问题描述

我使用 Redux、React 和 Node 从头开始​​创建了一个身份验证服务。一切正常，直到我将我的 Post 部分或 redux 连接到我的后端。我猜redux部分还可以。我的问题是当我发送授权承载令牌时。我可以使用失眠发帖。但是当我尝试使用网络应用程序发布时，我不能。这是我的行动：

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。

标签： reduxaxios

解决方案

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

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

从您正在使用的 CORS 的文档中：

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

所以我认为你应该在所有路由之前包含 app.options('*', cors()) 并将其放在文件顶部以首先处理。

推荐阅读