未接收带有axios post请求的Set-Cookie标头

sshcrbum  于 2023-03-02  发布在  iOS
关注(0)|答案(4)|浏览(196)

我有一个PHP脚本,如果直接在浏览器(或 Postman )中调用它,它会成功返回一些简单的头文件和一个set-cookie头文件。我可以从chrome devTools中读取类似的响应头文件。但是当我用Axios调用它时,set-cookie头文件不会显示,浏览器中也没有保存cookie。
我尝试了不同的方法,如更改服务器端的响应头和使用“withCredentials:true”,但是没有任何效果。我甚至没有得到一个错误或任何与cors相关的问题。
PHP语言:

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST, GET");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
header("Access-Control-Max-Age: 99999999");
setcookie("TestCookie", "Testing", time() + 3600, "/", "localhost", 0);
die();

联森:

Vue.prototype.$http = axios.create({
    baseURL: XYZ,
    withCredentials: true
})

所以我的第一个问题是为什么在直接调用php脚本的时候会出现头文件?我怎样才能通过axios来获得头文件呢?

lsmd5eda

lsmd5eda1#

可能cookie是'httpOnly',这意味着客户端javascript不能读取它。因此它不会显示在chrome cookie部分。在mozilla中测试相同的请求,标题将显示。

iklwldmw

iklwldmw2#

这可能不适用于您的情况,但是我在这个独立的nodejs脚本中使用axios时遇到了同样的问题。

const config = {
    url: 'https://remote.url/login',
    method: 'post',        
    headers: {
        'content-type': 'application/x-www-form-urlencoded',
    },
    data: qs.stringify({
        'email': username,
        'password': pwd
    })
}

axios(config).then(res => {
    console.log(res.headers);
}).catch(err => {
    console.log(err);
})

返回的http状态为200,但头中没有set-cookie。使用curl可以正确检索头,但状态代码为302
将以下配置选项添加到axios后:

maxRedirects: 0,
validateStatus: function (status) {
    return status <= 302; // Reject only if the status code is greater than 302
  },

我在response.header中收到了axios中的set-cookie

{
  server: 'nginx/1.16.1',
  date: 'Fri, 27 Dec 2019 16:03:16 GMT',
  'content-length': '74',
  connection: 'close',
  location: '/',
  'set-cookie': [
    'cookiename=xxxxxxxxxxxxxxxxxxxxx; path=/; expires=Sat, 26-Dec-2020 16:03:16 GMT'
  ],
  status: '302',
  'x-frame-options': 'DENY'
}

没有maxRedirects: 0我收到了我使用的远程url的主页的html。
在没有validateStatus的情况下,我在err.response.headers对象中收到了set-cookie标头。

8ljdwjyq

8ljdwjyq3#

在我的例子中,网络面板显示响应具有'Set-Cookie'报头,但是在axios中,报头不会显示,并且cookie正在被设置。
对我来说,分辨率是设置Access-Control-Expose-Headers头。
说明:
从这个关于axios存储库中的一个问题的评论中,我被引导到这个人的注解中,这些注解引导我设置Access-Control-Expose-Headers头--现在cookie在客户机中被正确设置。
因此,在Express.js中,我必须向cors中间件添加exposedHeaders选项:

const corsOptions = {
  //To allow requests from client
  origin: [
    "http://localhost:3001",
    "http://127.0.0.1",
    "http://104.142.122.231",
  ],
  credentials: true,
  exposedHeaders: ["set-cookie"],
};

...

app.use("/", cors(corsOptions), router);

同样重要的是,在axios端,我在以下axios请求中使用withCredentials配置,我希望包括cookie。
前/

const { data } = await api.get("/workouts", { withCredentials: true });
mznpcxlj

mznpcxlj4#

我正在添加{withCredentials:true}如下所示:

axios
.post(url, {
    foo: foo,
    baz: baz,
    }, {withCredentials: true})
.then(.............

相关问题