Vue配置反向代理解决跨域问题

开发问题描述：由于前后端分离的问题，因为在本地测试，存在前后盾地址不一致的问题，因此首先必须了解什么是跨域问题，其次在给出相应的解决方案，在这里主要是给出前端是如何解决跨域问题的。 至于后端如何解决跨域问题，在我之前的博客中给出了相应的解决方案，其实主要方案即为配置拦截器，这里给出大家一个连接：https://blog..net/weixin_43388691/article/details/126939114?spm=1001.2014.3001.5502 开发技术：Vue、Axio、Nginx 开发工具：Webstorm

（1）首先调用相应的方法：

（2）配置登录方法：

（3）修改Axios中的配置文件：在创建axios实例的时候将baseURL设置为/api 。

import axios from "axios";




const request = axios.create({
          
   
    // baseURL: http://localhost:8086,  //  注意!!  这里是全局统一加上了  /api  前缀,也就是说所有的接口都会加上/api前缀名
    // timeout: 5000


    //利用nignx解决跨域问题
    baseURL: /api,  //  注意!!  这里是全局统一加上了  /api  前缀,也就是说所有的接口都会加上/api前缀名
    timeout: 5000
})



export default request;

(4)修改vue.config.js：（ps;由于我是用vue的脚手架搭起来的环境，因此在初始条件下是没有这个文件的，这个可以自己手动进行创建！！）在proxy中设置要访问的地址，并重写/api为空的字符串，因为我们真正请求的地址是没有带/api，这个重写很重要!!!

// vue.config.js
module.exports = {
          
   
    runtimeCompiler: true,
    devServer:{
          
   
        proxy:{
          
   
            /api:{
          
   
                target:"http://localhost:8086/",
                changOrigin: true,  //允许跨域
                pathRewrite:{
          
   
                    ^/api:  //重写路径
                }
            }
        }
    }
}

（5）注意：假如请求的真正地址为：http://localhost:8086/vue/loginVu,但我们在浏览器上会看到是这样的： http://localhost:8080/api/vue/loginVue ,多了个/api，但并不影响我们请求数据。

至此，到这里前端解决跨域问题已经解决了！！