vue开发阶段解决跨域的方法---proxy 跨域代理

proxy 跨域代理

前言

这篇文章介绍 proxy 跨域代理。
注意：

① devServer.proxy 提供的代理功能，仅在开发调试阶段生效。

② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享。
看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 回顾：接口的跨域问题

vue 项目运行的地址：http://localhost:8080/

API 接口运行的地址：https://www.escook.cn/api/users

由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！

2. 通过代理解决接口的跨域问题

通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：

① 把 axios 的请求根路径设置为 vue 项目的运行地址（接口请求不再跨域）

② vue 项目发现请求的接口不存在，把请求转交给 proxy 代理

③ 代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求

④ 代理把请求到的数据，转发给 axios

3. 在项目中配置 proxy 代理

步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：

// 配置请求根路径
// axios.defaults.baseURL = 'https://www.escook.cn'
axios.defaults.baseURL = 'http://localhost:8080'
1
2
3

3. 在项目中配置 proxy 代理

步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：

module.exports = {
  devServer: {
      // 当前项目在开发调试阶段
      // 将未知的请求代理到这个路径
    // 拦截根路径，换成真正需要请求的路径
    proxy: 'https://www.escook.cn',
  },
}

1
2
3
4
5
6
7
8
9

注意：

① devServer.proxy 提供的代理功能，仅在开发调试阶段生效

② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！