跨域问题及其解决方案

程序员文章站 2024-02-18 16:54:05

...

文章目录

一、前言
二、简介

1. 什么是跨域问题

三、解决方案

0. 项目举例

1. 前端
2. 后端
3. 启动服务

1. Jsonp
2. Nginx反向代理
3. Java 后端：CORS

3.1 CORS 简介
3.2 原理

3.2.1 简单请求
3.2.2 特殊请求

3.3 代码实现

一、前言

略

二、简介

1. 什么是跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。总而言之，跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。因此：跨域问题是针对ajax的一种限制。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

三、解决方案

0. 项目举例

1. 前端

由于跨域问题针对的是ajax请求，所以这里写了一个简单的页面模拟ajax请求。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>未加载数据</title>
	</head>
	<body>
		<h1 id="h1"></h1>
	</body>
	<script src="js/Jquery.js"></script>
	<script>
		$.ajax({
			url: "http://localhost:8080/boot/user/listUser",
			type: "POST",
			dataType: "json",
			success: function(data) {
				console.log(JSON.stringify(data));
				$("#h1").text(JSON.stringify(data));
			},
			 error:function(data){
				$("#h1").text("请求失败");
            },
		});
	</script>
</html>

2. 后端

后端使用之前顺手搭建的一个SpringBoot随便搭建的小服务。暴露了一个接口user/listUser。一个用来获取用户列表的接口。

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public  List<User> listUser() {
        List<User> userList = jdbcTemplate.query("select * from user", new BeanPropertyRowMapper<>(User.class));
        return userList;
    }
}

3. 启动服务

启动后端服务，端口是8080。可以看到接口没问题
运行起来发现请求失败，但是接口已经正常访问并返回数据
控制台报错 - 跨域了：

1. Jsonp

Jsonp 是最早的解决方案，利用script标签可以跨域的原理实现。
在ajax访问时将将dataType类型改为 jsonp即可。所以这里不做过多演示。

2. Nginx反向代理

这种方式需要搭配一个Nginx来进行代理。利用nginx把跨域反向代理为不跨域。

在Nginx 配置文件中添加配置如下:
跨域问题及其解决方案

	
	server  {
		// 代理端口号
		listen 8090;
		// 代理服务地址
		server_name localhost;
		// 如果是 /boot开头的请求代理到 8080 端口
		location /boot {
			proxy_pass   http://localhost:8080;
			proxy_connect_timeout 600;
			proxy_read_timeout  600;
		}
		// 代理所有的请求到8848端口，因为 /boot的拦截在上，所以这里应该是除了/boot的请求 都代理到8848端口
		location / {
			proxy_pass http://localhost:8848;
		}
		
	}

这里Nginx将代理localhost:8090，通过8090端口的请求，如果是 /boot 开头的请求(如localhost:8090/boot/…)，则代理到 http://localhost:8080/boot/… 。否则代理到 http://localhost:8848 。
在启动服务之前需要修改一个前端代码。将请求路径改为
url: "/boot/user/listUser", 。
随后启动nginx 访问 http://127.0.0.1:8090/demo/index.html 发现访问成功

3. Java 后端：CORS

3.1 CORS 简介

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。

浏览器端：
目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
服务端：
CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

3.2 原理

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求

3.2.1 简单请求

只要同时满足以下两大条件，就属于简单请求。：
简单请求需要满足以下两个条件:

(1). 请求方法是以下三种方法之一：

HEAD
GET
POST

(2). HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin。Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: http://xxx.xxx.xxx
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8

其中：

Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

需要注意的是：
要想操作cookie，需要满足3个条件：

服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
浏览器发起ajax需要指定withCredentials 为true
响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

3.2.2 特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

预检请求样板：

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin以外，多了两个头：

Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
Access-Control-Request-Headers：会额外用到的头信息

预检请求的响应：
服务的收到预检请求，如果许可跨域，会发出响应：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

Access-Control-Allow-Methods：允许访问的方式
Access-Control-Allow-Headers：允许携带的头
Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

3.3 代码实现

代码实现很简单

@Configuration
public class SpringConfig {

    @Bean
    public CorsFilter corsFilter(){
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1:8848");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("*");   // * 则允许所有请求
        // config.addAllowedMethod(HttpMethod.GET);
        // config.addAllowedMethod(HttpMethod.POST);
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.配置映射路径，这里拦截所有请求路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        
        return new CorsFilter(configSource);
    }
}

以上：内容部分参考网络
https://blog.csdn.net/qq_38128179/article/details/84956552
https://www.cnblogs.com/gyrgyr/p/10571616.html
如有侵扰，联系删除。内容仅用于自我记录学习使用。如有错误，欢迎指正