vue3+vite用proxy解决跨域及proxy原理解析

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/125387464

本文介绍了在Vue3和Vite项目中如何使用proxy解决跨域问题。通过开启一个Node服务，封装原生ajax请求，并在vite.config.js中配置proxy，详细解释了proxy的工作原理，演示了如何通过代理转发实现跨域请求，避免浏览器的同源策略限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前端跨域的方式是面试八股文中常见的一部分，最近面试中也是被问到跨域的问题，跨域的解决方案无非就是几个

Jsonp跨域
cors
vue中的proxy跨域

本地项目中调试用的最多的就是 node代理

复习一下什么是跨域

浏览器从一个网页去请求另一个资源时，域名、端口、协议任一不同，都是跨域。在前后端分离的模式下，前后端的域名是不一致的，跨域是必然发生的事情。但服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制，也称为浏览器的同源策略

如果是跨域，你将会发现下图的报错，经典的跨域问题，前端和后端都是我的本地项目，但仅仅是端口的不同，浏览器请求就发生了跨域的问题

Access to XMLHttpRequest at 'http://127.0.0.1:8888/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

先开启一个后端node服务

由于需要用到一个后端接口来测试是否能够发生跨域效果，我们利用node开启一个服务，在vue项目之外开启一个node文件，然后执行以下代码

//node1.js

var http = require("http");
http.createServer(function (request, response) {

    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

vscode中可以直接下载一