开了一个react做框架新项目,因为是前后端分离,会出现跨域现象,虽然后台就可以解决跨域,但是前端还需要携带浏览器的cookie实现登录。(其实很简单,但是因为不了解,所以百度了一天查了好多资料都没办法解决,突然灵机一动才搞定的)。
前端做代理,有两种方式:
第一种:
比较简单,直接在package.json里面添加:(只适用于单个域名)
"proxy": "访问的接口域名"
第二种:
在src目录下,新建setupProxy.js文件,不需要安装任何依赖,这个是react的18版本才能用,然后重启项目就可以了。(适用于多个域名)
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function(app){
app.use(
createProxyMiddleware('/api',{// 遇见 /api 前缀的请求,就会触发该代理配置
target:'访问接口域名',// 请求转发给谁
changeOrigin: true,//控制服务器收到的响应头中Host字段的值
pathRewrite:{
'^/api':''//重新请求路径
}
}),
// 如果有多个,直接复制粘贴上述代码,修改前缀、域名、请求路径即可
)
}
需要注意的最重要的一点,也是我一直不成功的原因。做完代理之后,封装axios的时候,接口路径不要再加访问域名了。
axios.post(url, data).then(
(response) => {
resolve(response);
},
(err) => {
reject(err);
}
);
// url就是接口路径,不要在前面拼接访问域名
因为登录需要携带浏览器cookie,而axios本身是默认不携带的,所以需要加这句话
axios.defaults.withCredentials = true; // 允许携带cookie
完成上述操作,开发环境下的登录功能就可以实现了