Vue---Vue跨域解决方案

青旅半醒 2023-02-27 13:52 68阅读 0赞

*  **vue.config.js**

vue-cli3及更高版本的脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建。vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

![2020071811034358.png][]

*  **Vue解决跨域原理 **

浏览器是禁止跨域的，但是服务端不禁止。vue运行在node环境下，而node本身就是服务端环境。vue通过配置代理后，vue先去请求node的proxy，然后proxy修改origin为服务端地址，再去请求服务端，服务端判断请求来源于本站，就将请求的数据返回给proxy，proxy拿到数据后，修改orgin为localhost，再将数据给vue。proxy相当于解决跨域的中间人，既符合请求服务端要求，又符合返回客户端要求。

*  **Vue解决跨域**

在vue.config.js文件中配置代理来解决跨域问题。具体步骤如下。

1.vue.config.js文件中配置代理

module.exports = {      
        publicPath : '/',           //基本路径
        outputDir : 'dist',         //打包的包文件名
        assetsDir : 'static',       //css、js、img静态资源存放文件夹
        lintOnSave : false,         //是否在保存的时候使用 `eslint-loader` 进行检查。默认true
        runtimeCompiler : false,    //是否使用包含运行时编译器的 Vue 构建版本。默认false
        productionSourceMap : false,//生产环境不需要 source map,加速生产环境构建。默认true
       
        devServer: {                //webpack-dev-server配置
            host : 'localhost',       
            port : 9090,            //配置本项目运行端口
            proxy: {                //配置代理服务器来解决跨域问题
                '/api': {
                    target: 'http://localhost:80',      //配置要替换的后台接口地址
                    changOrigin: true,                      //配置允许改变Origin
                    pathRewrite: {
                        '^/api': ''
                    }
                },
            }
        },
    }

2.main.js中配置接口路径的前缀

配置后，每次请求的接口前面都会加上这个前缀，既加上代理的服务端地址。其中 /api 和vue.config.js中配置保持一致。

axios.defaults.baseURL='/api'

3.请求接口  其中服务端接口地址是：[http://localhost:80/spring/boot/test][http_localhost_80_spring_boot_test]

this.$axios.get("/spring/boot/test").then(
          response => console.log(response),
          err => console.log(err)
     );

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

[2020071811034358.png]: /images/20230209/c476c671ba9e49549a889a623a8a2659.png
[http_localhost_80_spring_boot_test]: http://localhost/spring/boot/test
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200718110925880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5,size_16,color_FFFFFF,t_70