Question

我有一个PHP脚本，如果直接在浏览器中（或由邮递员）调用，则可以成功返回一些简单的标头以及set-cookie标头。我可以从chrome devTools中读取类似的响应标题。但是，一旦我由Axios调用它，set-cookie标头就不会显示，并且浏览器中也没有保存cookie。

我尝试了各种不同的操作，例如更改服务器端的响应头以及在axios上使用“ 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();

JS：

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

所以我的第一个问题是，为什么直接调用php脚本时标题会出现？以及如何通过axios归档以获取标头？

Answer 1

cookie可能是“ httpOnly”，这意味着客户端javascript无法读取它。因此，它不会在Chrome Cookie部分中显示。在mozilla中测试相同的请求，标题将会显示。

Answer 2

这可能不适用于您的情况，但是在此独立的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的情况下，我在set-cookie对象中收到了err.response.headers标头。

Answer 3

对我来说，正在像这样添加{withCredentials：true}：

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

Answer 4

在我的情况下，网络面板显示响应具有“ Set-Cookie”标头，但是在axios中，标头不会显示，并且正在设置cookie。

对我来说，解决方法是设置Access-Control-Expose-Headers标头。

说明：

从this comment到axios存储库中的一个问题，我被定向到这个person's notes，这导致我设置了Access-Control-Expose-Headers header，现在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端，我使用withCredentials配置来跟踪我想包含cookie的axios请求。

ex /

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

不接收带有axios发布请求的Set-Cookie标头

4 个答案: