vue通过前端配置解决跨域问题proxyTable

vue是一个独立的前端框架,在开发过程中需要解决一下跨域问题, 当然了,在后端也是可以解决跨域问题的, 但是如果后端只提供接口,并不能解决跨域的话, 那么这时候就需要在前端解决跨域了 ,
首先找到vue前端的配置文件, 默认是在项目根目录下/config/中的index.js文件中
找到module.exports中的dev

dev: {
        env: require('./dev.env'),
        port: 8070,  //端口号
        autoOpenBrowser: false, //配置启动成功后是否自动打开浏览器
        assetsSubDirectory: 'static', 
        assetsPublicPath: '/',
        staticPath: '/static/',
        // 这里是解决跨域的配置, 意为将请求全部转为target值的地址进行请求
        proxyTable: {
            "/api": {  // 注意这里的斜线不可缺少
                target: "http://192.168.1.200",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "" // 通过pathRewrite重写地址,将"/api"转为"/"
                }
            }
        },
        cssSourceMap: false
    }

在实际使用中, 通过如下方式调用即可,注意使用时,url前面要添加一个前缀/api, 这里是对应着proxyTable中的"/api"

注意项目中main.js中不能对请求的前缀进行设置, 有些项目中是使用后端解决跨域的, 这时为了方便, 在前端就会统一配置请求的ip和端口号, 以便在开发时不用每个请求都加上地址前缀, 这里要注意 , 如果是从后端解决跨域改为前端解决跨域, main.js中设置请求地址前缀的部分一定要注释掉, 否则请求地址会一直使用main.js中配置的地址前缀, 无法映射到前端跨域配置文件中的设置, 注意 注意 千万注意!

至此, vue前端解决跨域就完成了, 是不是很简单