未通过跨域请求发送的 Cookie答案

【问题标题】：Cookies not sent with cross-origin-request未通过跨域请求发送的 Cookie
【发布时间】：2022-02-11 14:50:46
【问题描述】：

经过几天的搜索和尝试，我现在在这里。

我在 Netlify 中部署了 React 应用程序，在 Heroku 中部署了 Node.js 后端。在 localhost 环境中一切正常。但是部署后，请求头中不会发送cookie。

CORS：（后端 Node.js）

app.use(cors({
  origin: CORS_ORIGIN,
  credentials: true,
  allowedHeaders: "Content-Type,Accept,User-Agent,Accept-Language,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,cache-control"
}));

Axios：

import axios from "axios";
axios.defaults.withCredentials = true;
export default axios.create({
   baseURL: process.env.REACT_APP_BACKEND + "/api",
   headers: {
      "Content-type": "application/json",
      "Access-Control-Allow-Origin": process.env.REACT_APP_BACKEND,
   },
});

Fetching Data(Mutation): apiClient 是从上面的 Axios.js 导入的，cookies 由 react-cookies 处理

apiClient.post("/auth/login",{ email: "name@mail.com", password: "pawspaws" })
    .then((res) => {
            setCookie("jwt", res.data.accessToken, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 26000, secure: true, sameSite: 'None' });
            setCookie("refresh", res.data.refreshToken, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 2600000, secure: true, sameSite: 'None' });
            setCookie("user", res.data.user, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 26000, secure: true, sameSite: 'None' });
         }).catch((err) => console.log(err.response))

上面的代码设置了cookies..它正在工作。

现在，下面是我发送的请求，它不会随请求一起发送 Cookie：

apiClient.get("/posts/timeline", { params: { email: "name@mail.com" } })
         .then((res) => { console.log(res.data); })
         .catch((err) => { console.log(err.response) });

好吧，它返回 unauthorized 因为 Cookie 根本没有发送..

【问题讨论】：

标签： axios fetch cross-domain react-cookie

【解决方案1】：

好的，我找到了自己的解决方案.. 很简单.. 正在设置代理

刚刚在前端的 package.json 中添加了以下行：

"proxy":"https://random.name.herokuapp.com",

仅供参考，对于 Netlify，我们需要在公共文件夹中添加额外的 _redirects 文件。

_重定向

/api/* https://random.name.herokuapp.com/api/:splat 200
/*     /index.html                                  200

【讨论】：