react 前端代理，携带cookie访问接口

开了一个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

---

完成上述操作，开发环境下的登录功能就可以实现了