(基于vite)推荐前端开发中常用的跨域解决方案？

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

一、推荐方案(干货)

我们知道，由于浏览器的同源策略限制，前端在向后端接口发送请求时会存在跨域问题，解决方式网络上随便一搜就有好几种，这里列举开发中最主流的两种方案。话不多说直接上干货。

推荐方案：

开发环境生产环境

在服务端配置CORS

在服务端配置CORS

配置开发代理服务器，比如vite-server.proxy

配置生产服务器代理，比如nginx

二、What Is CORS？

CORS全称为Cross Origin Resource Sharing(跨域资源共享)。这种方案对前端来说没什么工作量，和正常Ajax发送请求写法上没有任何区别，工作量基本都在后端(其实也没啥工作量，就是配置一些HTTP协议)。

这里不详细讲解CORS的原理，推荐两篇不错的文章希望有助于理解吧:

三、服务器代理

可能有些后端开发人员觉得配置CORS麻烦不想搞(建议这种人直接拖出去~狗头.jpg),那么纯前端也是有解决办法的。

在开发模式下可以使用开发服务器的proxy(代理)功能，比如vite的。

但是这种方法在生产环境是不能使用的。在生产环境需要配置生产服务器(比如nginx、Apache等)来进行反向代理。不过，在本地服务和生产服务配置代理的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

简单说明一下上面这个图你就能理解了。既然浏览器页面直接请求接口服务有同源策略的限制，那么我们可以想到这样一种方式：让浏览器页面请求本地开发服务器(生产服务器)，再让开发/生产服务器去请求真实的接口服务，这样不就绕过了浏览器同源策略的限制了吗？也就是说，开发/生产服务器其实就是一个中转站，将真实接口响应回的数据再发送给客户端。

之所以可以这样做是因为同源策略是浏览器才有的，而服务器与服务器之间的请求不存在跨域限制。

四、在vite项目中配置服务器代理

我们以vite创建的一个vue项目的配置为例说明一下,初始工程结构如下:

我们再在src/utils目录下创建一个发送ajax请求的文件request.js

然后我们在App.vue中引入request.js并写一个简单的事例向:4567/api/userInfo 发送请求（注意此时还没有在vite.config.js中配置代理）

用express简单写一个后端服务,运行nodemon app.js把服务开启在4567端口

然后执行命令npm run dev,运行前端项目,发现浏览器报错：

原因是在没有配置代理之前，浏览器默认是向开发服务器也就是:3000/api/userInfo发送请求了,但是开发服务器是没有这个接口的，真实的接口是在localhost:4567上，因此需要在vite.config.js这个文件中配置代理服务:

这样当浏览器发送以/api开头的请求时，开发服务器会向target(目标地址)转发请求，并且请求地址拼接为:4567/api/userInfo,这样就能正常收到真实接口服务发送回的请求啦：

五、注意事项

本文代码部分只是简单演示了在开发服务器上的代理转发，但是如果项目要上线了仍需要配置生产服务器代理，如nginx做反向代理，有需要学习的可以自行Google。