# Vue3教程 - 22 网络请求
开发前端项目，网络请求必不可少，因为要请求后端服务器，获取数据，然后将数据展示在页面上。
# 22.1 代理配置
但是我们开发前后端分离的项目可能会遇到一个问题，就是跨域。
# 20.1.1 什么是跨域
跨域（Cross-Origin）是指浏览器的同源策略（Same-Origin Policy），同源策略是浏览器的一种安全策略，浏览器会限制了从一个域（域名、协议和端口相同）加载的文档或脚本去访问另一个不同域的资源。这种限制是为了防止一个网站恶意读取另一个网站的敏感信息。
以下 URL 都被认为是不同的源：
http://doubibiji.com与http://www.doubibiji.com（子域名不同）http://www.doubibiji.com:80与http://www.doubibiji.com:8080（端口不同）http://www.doubibiji.com与https://www.doubibiji.com（协议不同，http和https）
在前后端分离的项目中，前端和后台服务不是在同一个项目中，这会导致前后端的IP地址、端口或域名不一致，从而产生跨域问题。具体来说，当前端页面尝试通过Ajax等技术向后端接口请求数据时，如果前后端不满足同源策略的要求，浏览器就会阻止这次请求，从而引发跨域问题。
例如，后端服务运行在一个端口上，而Vue前端服务运行在另一个端口上时，由于两者端口不同，因此不满足同源策略的要求。此时，当Vue前端尝试通过Ajax请求后端接口获取数据时，就会遇到跨域问题。
# 20.2.2 跨域问题的解决方法
# 1 JSONP
JSONP（JSON with Padding）是一种通过 <script> 标签加载 JSON 数据的方式，但它只支持 GET 请求。JavaScript跨域请求数据是不可以的，但是使用 <script> 标签跨域请求其他站点的JavaScript脚本是可以的。可以把数据封装到JavaScript脚本中，作为脚本中函数的参数，然后将脚本返回给客户端，客户端获取脚本后，立即执行脚本，就可以获取到函数的参数，也就是服务器传递的数据了，从而解决了跨域问题。
JSONP是一种比较老的方式，目前已经被 CORS 大部分取代。
# 2 CORS
这是一种在服务器端通过设置适当的 CORS 头来允许跨域请求。也就是服务器告诉浏览器，我允许被跨域来访问，不要拦截了。
例如可以通过在Spring Boot项目中添加CORS配置类来实现，允许前端页面的域名访问后端接口。
# 3 使用反向代理
通过配置反向代理，前端所有的请求都会发送到同一个域名，也就是 Nginx 接收所有的请求，包括前端静态页面和后端动态数据接口的请求，然后 Nginx 反向代理服务器再根据请求路径将后端请求转发到对应的后端服务器，这就避免了浏览器的跨域限制。
# 22.2 代理配置
如果服务器使用了 CORS 来解决跨域问题，那么前端就不需要什么额外的处理了，直接就可以请求了。
如果后端的服务没有 CORS 相关的配置，那么在实际的 Vue 开发项目中，当项目开发完成，我们会将 Vue 项目打包成静态资源（HTML/JS/CSS），然后将静态资源部署到 Nginx 下，然后需要配置 Nginx 进行反向代理，将 Vue 项目中后端的请求转发给后端的服务器，具体可参见 前后端分离与跨域 (opens new window) 。
简单的说：也就是前端页面的请求和请求后端接口的请求都发送给 Nginx，这样协议/域名/端口 都相同，就不存在跨域问题了，但是 Nginx 在请求的 URL 上做一些过滤，例如 URL 中带 /api/ 的，Nginx 就将这些请求转发给后端的服务器。所以在 Vue 中所有请求后端服务器的接口，都统一带上 /api/ ，这样就可以了。
上面是开发完成部署到服务器上，可以使用上面的方式。
我们在本地进行开发的时候，不用那么麻烦，直接使用 vite 提供的代理服务来实现就可以了。
在项目 vite.config.js 中配置如下：