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

场景

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

一、概念介绍

1、跨域介绍

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

2、代理原理介绍

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

3、express介绍

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

二、具体配置

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

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

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

这样就可以解决开发环境访问跨域接口的问题了，如果有问题，欢迎大家指出 cli.vuejs.org/zh/config/

github.com/chimurai/ht…

转载于:https://juejin.im/post/5cc1845fe51d456e4869542b