vue中的跨域代理

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 696 | 阅读时长 ≈ 1 分钟

vue中的跨域代理 通常我们使用npm run dev运行的是在localhost:8080下面运行的,
如果api接口没有对跨域进行设置的话那么此时浏览器同源策略会告诉你无法请求接口
在vue-cli2.0创建的项目中我们可以在config文件夹下的index.js配置文件中对proxyTable进行如下配置

1
2
3
4
5
6
7
8
dev: {
    proxyTable: {
		'/api': {    //将www.exaple.com印射为/apis
            target: 'https://www.exaple.com',  // 接口域名
            changeOrigin: true,  //是否跨域         
        }
	}
  }

在vue-cli3.0创建的项目中我们可以在根目录创建vue.config.js进行如下配置

1
2
3
4
5
6
7
8
9
10
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.exaple.com',
        changeOrigin: true
      }
    }
  }
}

那么这个时候使用axios或者其他插件进行ajax请求时，只需要请求localhost:8080/api就会自动转发到https://www.exaple.com