axios 浏览器拒绝荣誉跨源响应的Set-Cookie标头

flvlnr44  于 2023-02-12  发布在  iOS
关注(0)|答案(1)|浏览(321)

我正在努力让我的前端设置一个通过后端发送的http cookie(并在后续请求时将其发送到后端),特别是希望设置一个用于身份验证的refreshToken。
我知道我的后端正在正确地发送cookie,因为登录响应的头如下所示。
Set-Cookie: refreshToken=someLongRefreshToken; Path=/; Expires=Thu, 19 Jan 2023 20:12:52 GMT; HttpOnly; SameSite=Lax

这就是我从前端发送请求的方式(通过拦截器设置auth令牌)。

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300; // default (200 - 299);
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
    withCredentials: true,
  },
});

然后在某些组件中
let res = await axiosAuth.get('http://localhost:9922/someRoute');
几个注意事项
1.我很确定我的问题出在前端,如果我登录并通过Postman发送另一个请求,它会正常工作,它会获取http cookie并在后续请求中将其传递回API。
1.虽然我在响应头中看到了cookie set-cookie,但在开发工具(application/cookie)中没有看到它。

  1. Cookie没有被设置为本地安全(因此我不必使用https)
    1.我已经确认我的API接受了必要的header/cors,这是我的api路由器,你可以看到我设置的header。
r.Use(cors.Handler(cors.Options{
    AllowedOrigins:   []string{"http://localhost:3002"},
    AllowedMethods:   []string{"GET", "POST", "OPTIONS"},
    AllowedHeaders:   []string{"Accept", "Access-Control-Allow-Credentials", "Authorization", "WithCredentials", "Content-Type", "X-CSRF-Token", "SelectedGroup", "Allow-Credentials", "Cookie"},
    ExposedHeaders:   []string{"Set-Cookie"},
    AllowCredentials: true,
}))

如果还有什么需要我提供的信息请告诉我。

fdbelqdn

fdbelqdn1#

您在客户端代码中错误的位置使用了withCredentials:它不是请求头,而是请求的属性。

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
    withCredentials: true, // incorrect
  },
});

你应该

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
  },
  withCredentials: true, // correct
});

相关问题