Vue3项目Proxy代理使用指南：跨域请求如此简单

最新推荐文章于 2025-03-22 11:23:22 发布

阿珊和她的猫

最新推荐文章于 2025-03-22 11:23:22 发布

阅读量1.6k

点赞数 17

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142281859

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

一、背景

Vue3是一个流行的前端框架，用于构建用户界面和单页面应用程序。在开发过程中，前端开发者经常需要与后端API进行交互，以获取或提交数据。然而，由于浏览器的同源策略限制，直接访问后端API可能会受到跨域资源共享（CORS）策略的限制。为了解决这个问题，Vue3项目中可以使用Proxy代理技术来绕过这些限制，实现跨域请求。

二、特点

绕过CORS限制：Vue3项目中的Proxy代理可以绕过后端API的CORS策略，使得前端开发者能够访问受限制的API资源。
屏蔽后端API细节：通过Proxy代理，前端开发者可以将后端API的细节隐藏起来，使得前端代码更加简洁和易于维护。
请求转发：Proxy代理可以将前端发送的请求转发到后端API，并将后端API的响应返回给前端，实现数据的交互。

三、案例

以下是一个在Vue3项目中配置Proxy代理的案例：

创建Vue3项目：使用Vue CLI创建一个新的Vue3项目。
配置Proxy代理：在项目的根目录下创建一个名为vue.config.js的文件，并在该文件中配置Proxy代理。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

使用Proxy代理：在Vue3项目中，可以通过访问/api路径来发送请求到后端API。例如，在组件中使用axios库发送请求：

import axios from 'axios';
export default {
  data() {
    return {
      data: null
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

测试跨域请求：在浏览器中访问Vue3项目，测试前端发送的请求是否能够成功绕过后端API的CORS策略，获取到受限制的API资源。

四、参考资料

Vue CLI - Configuring the Dev Server: https://cli.vuejs.org/config/#devserver-proxy
MDN Web Docs - CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
GitHub - axios: https://github.com/axios/axios