vue-cli proxyTable跨域请求

在项目开发的时候，接口联调的时候一般都是同域名下，但是当我们现在使用vue-cli进行项目打包的时候，会启动我们本地的服务器，比如域名是http://localhost:9527 ，这种情况下我们再访问其他的接口地址，就会存在跨域的问题，请求接口就会出现错误，因此我们需要在打包的时候配置一下。

1. 开发环境

在vue-cli项目中的config文件夹下的index.js配置文件中，dev长这样子

dev: {
    // 静态资源文件夹
    assetsSubDirectory: 'static',
    // 发布路径
    assetsPublicPath: '/',
    // 代理配置表
    proxyTable: { },
    // 本地访问 
    host: 'localhost', 
}

我们修改一下：

 // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置
     proxyTable: {
       //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
      '/api': {
         target: 'http://news.baidu.com',//你要跨域的网址  比如  'http://news.baidu.com',
        secure: true,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的
        pathRewrite: {
          '^/api': '/api'//路径的替换规则
          //这里的配置是正则表达式，以/api开头的将会被用用‘/api’替换掉，假如后台文档的接口是 /api/list/xxx
          //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx
        }
      }
    },

打印出数据没有报错就说明已经跨域成功了

 

1.1 修改本地hosts文件

可以修改的本地的hosts，一劳永逸，也能解决本地测试后台无法向我们本地环境设置cookie的问题

 vi /etc/hosts 打开hosts文件，

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

localhost      www.exaple.com 

 

2. 发布上线

上线要进行nginx反向代理设置，同时应区分环境变量，判断是不是 development环境，是的话就是空的，否则就是配置文件里设置的根作用域。