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

我不是女神ヾ 2023-09-26 09:13 160阅读 0赞

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

（1）首先调用相应的方法：  
![在这里插入图片描述][1545d898178b4be08bce0fbb7123173d.png]

（2）配置登录方法：  
![在这里插入图片描述][7692a8a0503e42fc85dbab17d835ede9.png]

（3）修改Axios中的配置文件：在创建axios实例的时候将baseURL设置为/api 。  
![在这里插入图片描述][5d152527d0424fbbbd22f6ba5c5b9a10.png]

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，这个重写很重要!!!  
![在这里插入图片描述][f5544ed9dd9b4f428c4e60f6019fc61f.png]

// 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，但并不影响我们请求数据。

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

[1545d898178b4be08bce0fbb7123173d.png]: https://img-blog.csdnimg.cn/1545d898178b4be08bce0fbb7123173d.png
[7692a8a0503e42fc85dbab17d835ede9.png]: https://img-blog.csdnimg.cn/7692a8a0503e42fc85dbab17d835ede9.png
[5d152527d0424fbbbd22f6ba5c5b9a10.png]: https://img-blog.csdnimg.cn/5d152527d0424fbbbd22f6ba5c5b9a10.png
[f5544ed9dd9b4f428c4e60f6019fc61f.png]: https://img-blog.csdnimg.cn/f5544ed9dd9b4f428c4e60f6019fc61f.png