Vue.js 开发时模拟跨域请求

0001年1月1日 1 分钟阅读

前端开发时，请求后台接口经常需要跨域，vue-cli 实现跨域请求只需要打开 config/index.js，修改如下内容即可。

例如要请求的接口 url 为 http://172.3.2.1:8000/look/1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


module.exports = {
    dev:{
        proxyTable:{
            '/api':{
                target: 'http://172.3.2.1:8000',
                changeOrigin: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

如果接口为本地的 express koa 做的接口

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //利用proxyTable我们能够将外部的请求通过webpack转发给本地，也就能够将跨域请求变成同域请求了。
    proxyTable: {
      '/api':{
        target: 'http://localhost:3000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    //...
  }
  //...
}

注：这只是开发时候使用的，构建后不这么搞；

本文目录