vue 跨域问题解决办法

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

在使用vue-resource时，如果想要调用一个第三方的api，往往直接调用是不行的。控制台会提示No Access To …，翻译成中文意思就是请求的资源不允许跨域。

那么有什么办法来调用呢？笔者在网上找到了两种方法，原理基本都是代理转发：

使用proxyTable

如果你是使用vue-cli来构建的模板，进入config/index.js，修改proxyTable为：

1
2
3
4
5
6
7
8
9
proxyTable: {
  '/test': {
    target: 'http://news-at.zhihu.com/api/4/news',
    changeOrigin: true,
    pathRewrite: {
      '^/test': '/latest'
    }
  }
}

proxyTable是一个地址映射表，可以简化复杂的URL请求。例如，我们请求的网址是http://news-at.zhihu.com/api/4/news/latest时，写URL的时候可以只写/test，因为URL会被重写。

changeOrigin参数接受一个布尔值，为true时会在本地虚拟一个服务端接收你的请求并代你发送该请求。

配置apache / linux 反向代理

笔者没有尝试这种方法，感兴趣的可以查看这篇文章

注意

以上方法仅适用于开发环境，生产环境不适用