导航
导航
文章目录
  1. 配置 proxyTable
  2. 使用（请求）

基于vue-cli配置proxyTable开发环境的跨域

2017.06.21 hzzly

前言：目前前端项目普遍采用前后端分离的思想来开发，这样在和后端进行数据联调时势必会面临恼人的跨域问题，最近几个基于Vue开发项目时也遇到了这个问题，网上关于跨域的解决方案很多，这里就简单的介绍基于vue-cli配置proxyTable的开发环境来解决跨域。

还不懂前后端分离的可以移步👉：前后端分离的尝试

配置 proxyTable

在 config/index.js 中，把 dev 下的 proxytable 里面配置如下：

1
2
3
4
5
6
7
8
9
proxyTable: {
  '/api': {
    target: 'http://api.hjingren.cn',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

使用（请求）

1
fetch('/api/playlist/detail?id=12345')

最后：vue-cli的这个配置来自于其使用的插件http-proxy-middleware，想进一步了解的可以深入研究。