2025年跨域（跨域解决方案）

编程日记 • 2025-03-12 16:01 • 阅读 23

跨域： 跨域（Cross-Origin）是指在网络中，一个源（Origin）的网页或者网站尝试去访问另一个不同源的资源时发生的情况。一个“源”是由协议（例如HTTP或HTTPS）、域名和端口号组成的组合。如果任意一个组件不同，就被认为是不同的源。

注意： 协议、域名、端口号中的任意一个不同，就会受到同源策略的限制。

比如： 端口不同导致跨域报错：

原理: script标签的src不受到同源策略的限制。但是只能使用get请求。
后端返回一段js代码，代码的内容是一个前端定义好的函数的调用，把需要返回的内容传递进去。(很有意思，后端调用前端定义好的函数，前端定义好的函数必须在全局作用域)
缺点：只能发送get 请求，不安全，不好维护.
优点，兼容性比较好。

原理： 跨域是浏览器特有的，而服务器和服务器之间不存在跨域。前端的打包工具会自带一个服务器，我们只需要在配置文件中配置反向代理的的规则，然后把请求请求到打包工具的服务器，它就会自动把该请求转发到指定的服务器，当请求完成的时候，它又会把请求的结果返回给浏览器。

以vite为例：

在项目中初始化,新建

解释：

以上面的vite 配置为例，举个例子：

当我们发起请求：（5173 vite默认的端口）的时候，就会被代理到.

原理：只要后端在响应头中加上对应的字段，浏览器就不会再报错。一般通过拦截器统一处理。

以express 为例：

如果只想对某一个请求允许跨域，springboot 还可以通过注解实现，前端的装饰器，有时间我再试着写一下前端的装饰器，哈哈哈~~~

原理：服务器和服务器之间的通信不存在跨域，因此我们可以开一台中间服务器（），后端无需改变。前端把请求发给 , nginx 服务器把请求毫无变化地转发给后端的服务器，后端的服务器响应给服务器，服务器加上响应头以后，再返回给前端。

这样，前端收到的响应就是具有跨域请求响应头的响应了。

直接再官网下载nginx服务器，解压到本地，找到对应的配置文件配置一下，然后启动nginx服务器就行了。

这里使用微软appStore 中安装的ubuntu 为例子实现。本以为安装很简单，但是安装的时候有一堆问题，几次差点放弃，还好坚持下来了，历尽千辛，记录在这里了# ubuntu 安装遇到的问题（win11）

linux 不是本文的重点，就列举几个常用的linux 命令吧。

注意： nginx 默认的端口是80 ，如果windows本地有IIS 服务，或者其它服占用了端口，需要自己更改一下端口。

依次执行以下命令，更改nginx 的配置文件。

进入编辑模式(左下角的INSERT 代表编辑模式)

找到对应的配置位置，配置代理（如果代理不生效，可能是80端口被占用了，更改一下）server 中加上配置

请求的时候，直接请求到代理服务器，代理服务器会自行转发。