跨域请求问题浅解

跨域请求问题的成因

简单来说，“跨域”就是你的网页从一个源（协议、域名、端口的组合）向另一个不同源的服务器请求资源。

浏览器出于安全考虑，有一个叫做同源策略的规定。它要求网页只能访问和它来自同一个源的资源。

同源策略是一项关键的安全措施。它规定，一个源的文档（比如你的网页）不能直接访问另一个源的资源（比如另一个网站的 API）。

这个策略是为了防止恶意行为。例如，它可以阻止一个恶意的网站上的脚本，未经你的允许就从你的银行网站读取数据。

因而当我们需要进行跨域通信时（例如不同位置的前后端进行连接时），就产生了跨域请求问题。

跨域请求问题的解决方式

方法一：让前后端同源

例如，在进行SpringBoot应用开发时，将前端文件放在SpringBoot项目的src/main/resources/static 目录下。

再将JS代码中的fetch 请求 URL 改为相对路径。

启动应用后，在浏览器中访问http://localhost:8080/index.html

方法二：使用代理

在Vue、React等现代前端开发主流框架中，代理都是标准做法。
原理：前端开发服务器（如 Vite 或 Webpack Dev Server）会为你提供一个代理功能。你的浏览器向这个代理发送请求，代理再将请求转发给后端服务器，从而完美规避跨域。

而在用传统前端三件套进行开发时，我们可以安装Live Server插件来作为代理，启动应用后在浏览器中访问http://127.0.0.1:5500/index.html。