经过几天的搜索和尝试,我现在在这里。
我在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) });