如何在前端处理掉跨域的问题?

在Vue项目中,使用Vue的配置文件就可以轻松搞定。

一、文件位置

在网上,很多人写教程都从来不会写文件所在的位置 ,或者是适应什么样的版本,反正是入了很多坑才找到的设置方法,由于时间过长,找不到以前看到的教程是哪位大牛的,先说声谢谢。

在vue-cli 3.0+ 以上版本,配置的文件在根目录下,即:vue.config.js。

Vue实践:Vue-cli 3.0+ 跨域设置方法-前端喵

二、修改参数

页面截图

Vue实践:Vue-cli 3.0+ 跨域设置方法-前端喵

实际代码

本代码发布于2019年3月24日,对vue-cli 3.0 之前的版本不管用,对于不存在vue.config.js的项目也同样不适用。

module.exports = {
    baseUrl: './',
    productionSourceMap: false,
    devServer: {
         proxy: {
                     '/appz':{
                         target: 'http://10.10.7.232:8782/',
                         changeOrigin: true,
                         pathRewrite:{
                             '^/appz':'',
                         }
                     },
                     '/appx':{
                         target: 'http://10.10.7.230:8783/',
                         changeOrigin: true,
                         pathRewrite:{
                             '^/appz':'',
                         }
                     }
         }
    },

}