0

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

我在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"
}));

爱讯:

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))

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

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

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

Firefox 中的 Cookie 在此处输入图像描述 好吧,它返回未经授权,因为 Cookie 根本没有发送..

4

1 回答 1

0

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

只需在前端的 package.json 中添加以下行:

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

仅供参考,对于Netlify,我们需要公共文件夹中的附加 _redirects 文件。

_重定向

/api/* https://random.name.herokuapp.com/api/:splat 200
/*     /index.html                                  200
于 2022-02-11T06:50:46.480 回答