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

先后端分离，你能够理解为这是两个不一样的项目，先后端其实已经跨域了。咱们在本地启动项目的时候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 => {}
  },
复制代码

你们只需关注配置proxy，其余配置不必定跟我如出一辙，能够单独像我这样单独抽出来为一个js文件，也能够直接写在里面，随意哟