【白话文通俗易懂搞明白并解决】跨域问题

文章目录

跨域出现的场景
跨域的定义
解决跨域的方法
- 方法一：JSONP
- 方法二：添加响应头
- 方法三：通过nginx代理跨域
跨域过滤器代码示例

跨域出现的场景

在前后端分离项目中，经常会出现跨域问题，表现为：
当在浏览器中访问前端工程的地址时会出现报错，
chrome报错表现如下：

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

firefox报错表现如下：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:8080/system 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：200。

上述报错的原因是前端地址访问后端地址的时候被CORS policy阻止，因为没有Access-Control-Allow-Origin 头信息。

跨域的定义

CORS全称 cross origin resource share 跨域资源共享，浏览器的同源策略是一种安全机制，即判断是否跨域请求，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。例如：
比如：
从http://localhost:80 到 http://localhost:81 由于端口不同，是跨域。
从http://192.168.0.10:80 到 http://192.168.0.11:80 由于主机不同，是跨域。
从http://192.168.0.10:80 到 https://192.168.0.10:80 由于协议不同，是跨域。

注意：服务器之间是不存在跨域请求的。

上述的过程举个简单的例子。你家的门牌号是501，邻居家的门牌号是502。正常情况下你是不能随便去邻居家拜访甚至拿东西的，如果你在没有经过允许的情况下去拿东西，你爸就会把你拽回来不让你去。因为你爸担心邻居可能不安好心，给你灌输一些不好的思想导致你学坏或者套你的话把咱家的银行卡密码泄露出去。这个过程中，你就是项目中的前端工程，你爸就是浏览器，邻居就是服务端，所谓的不好的思想或者套话就是非法网站恶意窃取信息的过程。

解决跨域的方法

解决跨域问题的常见方法：

方法一：JSONP

通过动态添加script标签来实现跨域，因为script标签不受同源策略的限制，可以从任意域加载 JavaScript 代码。但这种方式只能处理GET请求并不能处理POST或其他类型的请求，且容易受恶意服务器的恶意代码注入。

这就相当于你拿个script篮子放到502门口，让邻居把要给的东西放到篮子里你再拿走。

实现步骤：

前端发起一个请求，使用script标签引入目标服务器上的数据资源。
目标服务器将返回的数据包装在一个回调函数中，这样浏览器就可以执行该回调函数，读取数据。

<script>function handleResponse(data) {console.log('Received data:', data);}// 动态创建 <script> 标签var script = document.createElement('script');script.src = 'http://example.com/api/data?callback=handleResponse';document.body.appendChild(script);
</script>

方法二：添加响应头

浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里，如：

Plaintext
GET / HTTP/1.1
Origin: http://localhost:8601

服务器收到请求判断这个Origin是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如：

Access-Control-Allow-Origin：http://localhost:8601

如果允许任何域名来源的跨域请求，则响应如下：

Access-Control-Allow-Origin：*

这个过程就相当于邻居打电话跟你说“501，你放心来拿你要的东西吧，我的所有东西都是安全的。”，这时候你爸也不会拦着你去别人家了。
(但上述的过程其实是存在风险的，因为邻居说的话并不一定就是真的，他有可能还是会误导你，这时候就需要一些其他安全机制来保证数据的安全性，比如身份验证、授权检查、内容安全策略、HTTPS加密通信等，所以CORS并不能防止服务器端返回恶意数据)

上述这种方法使用最多，例如在Springboot项目中配置一个过滤器来处理即可，下文会讲到。

方法三：通过nginx代理跨域

由于服务端之间没有跨域，浏览器通过nginx去访问跨域地址。Nginx 在同一个域名下代理请求，将跨域请求转发到其他服务器上。由于请求的源是同一个域，且Nginx作为服务端软件，作用是处理请求和响应，不直接和用户交互，因此不会受到浏览器的同源策略限制。

这个过程就像你派一个机器人去邻居家拿东西，它去邻居家拿完东西再回来给你。

在 Nginx 配置文件中设置反向代理，将请求转发到目标服务器即可。
假设前端请求的 URL 是 http://192.168.0.10/api/，我们希望代理到 http://192.168.0.11/api/，可以在 Nginx 配置文件中进行如下配置：

server {listen 80;server_name 192.168.0.10;location /api/ {proxy_pass http://192.168.0.11/api/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

通过上述配置，当前端请求 http://192.168.0.10/api/data 时，Nginx 会将请求转发到 http://192.168.0.11/api/data。
在这里插入图片描述

跨域过滤器代码示例

对于上述所述的方式二，在SpringBoot项目中，我们通常可以添加配置一个跨域过滤器类用于在响应头上添加允许标志，从而解决这个问题。参考代码如下：

@Configurationpublic class GlobalCorsConfig {/*** 允许跨域调用的过滤器*/@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();//允许白名单域名进行跨域调用config.addAllowedOrigin("*");//允许跨越发送cookieconfig.setAllowCredentials(true);//放行全部原始头信息config.addAllowedHeader("*");//允许所有请求方法跨域调用config.addAllowedMethod("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}}