Axios是否支持Set-Cookie？是否可以通过Axios HTTP请求进行身份验证？

Question

我正在尝试使用Axios HTTP请求调用验证Express API后端。虽然我能够在响应头中看到'Set-Cookie'，但cookie并没有设置。是否可能通过Axios HTTP调用设置Cookie？

Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 355
Content-Type: application/json; charset=utf-8
Date: Fri, 28 Sep 2018 05:59:01 GMT
ETag: W/"163-PAMc87SVHWkdimTJca7oRw"
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; Max-Age=3.6; Path=/; Expires=Fri, 28 Sep 2018 05:59:04 GMT; HttpOnly
X-Powered-By: Express

- Mandakh

Answer 1

试一试这个！

axios.get('your_url', {withCredentials: true}); //for GET
axios.post('your_url', data, {withCredentials: true}); //for POST
axios.put('your_url', data, {withCredentials: true}); //for PUT
axios.delete('your_url', data, {withCredentials: true}); //for DELETE

关于axios文档的更多信息：

"withCredentials表示是否使用凭据进行跨站点访问控制请求" - https://github.com/axios/axios

有关withCredentials的更多详细信息：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

- Aaron

---

它奏效了！此外，我需要在Express API上添加app.use(cors({ credentials: true }))。我发现，在没有凭据的情况下，CORS调用中的Ajax请求会忽略Cookie。感谢@Aaron。 - Mandakh

很高兴能够帮助！ - Aaron

withCredentials 只对 HTTP 基本身份验证有用。 - Billal Begueradj

@Begueradj withCredentials 对于发送和设置 cookies 也非常有用。 - Aposhian

@LeeDat 这可能可以解决你的问题，但我不确定百分之百。我想你需要将“Content-Type”标头设置为符合CORS要求的内容。查看此主题https://dev59.com/D1kT5IYBdhLWcg3wKsWq#39012388 - Aaron

Answer 2

是的，你可以通过Axios设置cookie。cookie需要传递到headers对象中。你可以在get/post/put/delete等请求中发送cookie： 如Aaron所建议的：

axios.get('URL', {
  withCredentials: true
}); 
axios.post('URL', data, {
withCredentials: true
}); 
axios.put('URL', data, {
withCredentials: true
});
axios.delete('URL', data, {
withCredentials: true
});

或者您也可以尝试这个：

axios.get(url, {
            headers: {
                Cookie: "cookie1=value; cookie2=value; cookie3=value;"
            }
        }).then(response => {
              console.log(response);
});

- Amuk Saxena

---

我尝试了这种方法，但是浏览器一直告诉我“拒绝设置不安全的头部'Cookie'”。 - kenshinji

@kenshinji，你在浏览器中看到这个错误是因为根据XHR规范，setRequestHeader方法不应该设置被禁止的头部名称。 - Amuk Saxena

Answer 3

如果其他人也遇到了我面临的问题，

这是我在类似问题上的回答转帖https://dev59.com/BLHma4cB1Zd3GeqPQ8oC#62821342

---

在我的情况下，网络面板显示响应具有“Set-Cookie”标头，但在axios中，标头不会出现，而cookie已被设置。

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

为了解释，从axios存储库的一个问题的此评论中，我被引导阅读了这个个人笔记，它引导我设置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请求中需要包含cookies的部分，使用withCredentials配置是非常重要的。

例如：

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

- jnotelddim

---

这是唯一可行的解决方案！其他所有方法都太老旧且失败了。 - praveen kumar

Answer 4

我尝试设置 withCredentials: true 但仍出现以下错误：

跨域请求被阻止：同源策略不允许读取远程资源 http://localhost:4000/users/register。 (原因：CORS请求失败)。

CORS已配置为允许从前端端口发送请求。

我必须更改axios的默认选项，如下所示：

axios.defaults.withCredentials = true

问题已经解决。没有错误，Set-Cookie 工作正常。

- Nicolas Hevia

Answer 5

Cookie 无法被触及，因为它在附加到响应对象后会捆绑到请求对象中。

function sign(req,res){
  res.cookie("x-token", signed, { maxAge: (new JWTService().jwtExpirySeconds * 
   1000) });
}

客户端收到此响应后，只需继续请求即可，"Cookie"命名的set-cookie将捆绑到这些请求中，如下所示

注意：当HTTP cookie过期时，它会自动被删除，并且在此之后不会捆绑到请求中。

- Proau