使用webpack解决vue中axios请求的跨域问题解决登录退出请求

一、问题

在写项目中，请求登录的时候遇到跨域的问题，造成能正常的返回数据，但是在cookie里面没有查询到后台存的SESSION值，造成用户未登录的状态，查询不到数据，查询了各种方法，最后配置了一下webpack中的 devServer 里面的proxy,解决了跨域的问题

项目框架：vue
使用：webpack:5.28
请求方式：axios请求

二、修改配置内容

在项目根目录下webpack.config.js中添加配置

module.exports={
    // ******
    devServer:{
      proxy:{ //解决跨域问题
        '/api': { //捕获API的标志，如果API中有这个字符串，那么就开始匹配代理
          target: 'http://192.168.0.5:8089', //代理地址
          pathRewrite: {'^/api' : ''}, //路径重写
          changeOrigin: true,     // target是域名的话，需要这个参数，
          secure: false,          // 设置支持https协议的代理
        },
      }
    },
    // ******
    

参数说明：

1、'/api'

捕获API的标志，如果API中有这个字符串，那么就开始匹配代理(如果你请求 /api/other,就会代理到http://192.168.0.5:8089/api/other)

2、target

你需要请求的跨域地址，可以域名或者ip(代理的地址)

3、pathRewrite

路径重写，也就是说会修改最终请求的API路径。
如果你请求的是/api/other，设置pathRewrite: {'^/api' : ''}配置后，就会变为
http://192.168.0.5:8089/other

4、changeOrigin

可以让target参数是域名,根据需要

5、secure

secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

三、其他配置（补充二）

我们不能保证每次的请求地址都有 /api 的路径地址，如果每个都手动的添加就会很废时间，所以我们在项目根目录下main.js中配置根路径axios.defaults.baseURL = '/api'
在项目根目录下main.js中添加配置项

axios.defaults.baseURL = '/api' //必须配置
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; //请求头

经过配置后，就可以正常的登录退出了。