Vue---Vue跨域解决方案

vue.config.js

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

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

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

扫描二维码关注公众号，回复： 12480907 查看本文章

Vue---Vue跨域解决方案

猜你喜欢