vue-cli3 配置proxy代理解决开发环境跨域问题

场景

在开发环境遇到跨域的问题，没法利用后端作相关配置来解决，因此只能用前端的方法来实现跨域访问。

1、概念介绍

一、跨域介绍

这里的域指的是协议+域名+端口号，当目标url的协议和域名以及端口号三者都和咱们网站自己的url同样时，被认为同域，不同则认为跨域，浏览器会对跨域的请求进行限制，出于安全方面的考虑。所以只有浏览器会遇到限制，而在node环境发起一样的请求不会受限制。

二、代理原理介绍

如图，当用户A没法直接访问服务器B上面的资源（好比咱们的跨域），可是代理服务器Z能够访问服务器B上面的资源。而后咱们用户A直接访问代理服务器Z，代理服务器Z去访问服务器B拿到想要的资源再返回给用户A，这样咱们就拿到了服务器 B上面的资源，解决跨域限制的问题。

三、express介绍

Express 是一个路由和中间件 Web 框架，我理解的 express在这里起到的做用是： 一、发起http请求拿到须要的B服务器上面对应的资源 二、启动一个http服务供用户A访问

2、具体配置

好了，介绍说完了，下面开始上代码吧 一、将目标接口请求地址中的host和端口改为运行vue项目相同的host和端口

二、在vue项目的根目录下找到vue.config.js文件，若是没有就 新建一个，再写入 如下内容

module.exports = {
    devServer: {
      proxy: {
        '/api': { //
          target: 'https://news-at.zhihu.com/', //须要请求的目标接口
        }
      }
    }
  }
复制代码

这样就能够解决开发环境访问跨域接口的问题了，若是有问题，欢迎你们指出 cli.vuejs.org/zh/config/

github.com/chimurai/ht…