vue-cli前后端分离之本地环境proxy代理&跨域问题-CSDN博客

前后端分离，你可以理解为这是两个不同的项目，前后端其实已经跨域了。我们在本地启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，但是这仅仅是前端页面的启动，如何跟后台交互拿到后台数据呢？

通过在vue-cli配置文件里面设置一个代理，就能解决跨域的问题，通常需要后台来进行配置。

在config文件夹中新建一个文件命名为proxyConfig.js :

//项目域名地址
const testurl = 'http://exaple.com';
const localurl = 'http://172.***.***.233:8084';//后端本地地址
let ROOT,ROOT1;
let PROXYROOT;//代理指向地址
//由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
if (process.env.NODE_ENV === 'development') {
    //开发环境下的代理地址，解决本地跨域跨域
    ROOT = "/view" //公告接口
    ROOT1 = "/newsflashview" //快讯接口
    PROXYROOT = testurl
} else{
    //生产环境下的地址
    ROOT = testurl;
    PROXYROOT = testurl 
}

module.exports = {
    proxy : {
        [ROOT]: {    //将www.exaple.com印射为ROOT 即/view
            target: PROXYROOT,  // 接口域名
            ws: true,
            changeOrigin: true 
        },
        [ROOT1]: {    //将www.exaple.com印射为ROOT1 即/newsflashview
            target: PROXYROOT,  // 接口域名
            ws: true,
            changeOrigin: true 
        }
    },
}
//ROOT是根据你接口来的，此处我的接口服务器提供的接口为：http://exaple.com/view/usermessage
复制代码

vue-cli 2.0

vue proxyTable

var proxyConfig = require('./proxyConfig')
//修改项目中的config文件夹下的index.js配置文件中的dev：
dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,   
    cssSourceMap: false
  }
复制代码

vue-cli 3.0

vue proxy

var proxyConfig = require('./proxyConfig')
//修改项目中的vue.config.js配置文件中的devServer：
// webpack-dev-server 相关配置
  devServer: {
    host: "localhost",
    port: 8080,
    https: false,
    open: true,
    hotOnly: false,
    // 配置多个代理
    proxy: proxyObj.proxy,// 设置代理
    //或直接这样写
    // proxy:{
    //     "/view": {
    //         target: "http://exaple.com",
    //         ws: true,
    //         changeOrigin: true,
    //         secure: false
    //       }
    //   }, 
    before: app => {}
  },
复制代码