关于跨域访问

1 概念

2 案例

3 解决

4 实现

5 什么是跨域问题

---

示意图

1 概念

跨域访问，是指从一个域名的网页去请求另一个域名的资源。比如从 www.baidu.com 页面去请求 ww w.google.com 的资源。

但是一般情况下不能这么做跨域访问，因为有浏览器的 “ 同源策略 ” 存在，这是浏览器对 JavaScript 施加的安全限制。

“ 同源策略 ” 简单的说，就是 A 网站页面访问 B 网站的资源受限（跨域访问），除非 A 和 B 是 “ 同源 ” 。

“ 同源 ” 是指三个相同：

• 协议相同
• 域名相同
• 端口相同

只有有任何一个地方不同，就认为是跨域。 如果非同源（跨域）会受到 AJAX 请求不能发送

我们在项目中，需要设置对跨域访问的支持，是因为项目的架构需要，例如：

• 公司内部有多个不同的子系统，例如A和B，分别部署在不同的服务器上，其域名也不相同
• 由于公司内部的数据需要，现在A系统中，跨域访问B系统，从而获取内部的一些信息资源

---

2 案例

1. 创建 springboot_html 项目

• pom.xml

<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-web</artifactId> 
</dependency> 
<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-thymeleaf</artifactId> 
</dependency>

• hello.html

 

•  HellController.java

 2. 创建springboot_ajax项目

• AjaxController.java

 3. 访问springboot_html项目的index.html

 4. 点击按钮发送ajax请求访问springboot_ajax项目的接口

 原因：CORS 头缺少 'Access-Control-Allow-Origin' :

3 解决

通过 CORS 跨域资源共享方案解决问题

3.1 概念

CORS(Cross-origin resource sharing) ，是一个 W3C 标准，全称是 " 跨域资源共享 " 。

• 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
• 对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。
• 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息。（Origin）
• 有时还会多出一次附加的请求，但用户不会有感觉。（options方式的请求）

3.2 分类

浏览器将 CORS 请求分成两类：

• 简单请求（simple request）
• 非简单请求（not-so-simple request）

1. 简单请求

请求方法是 GET 、 POST 、 HEAD

Content-Type 只包含以下三种情况

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

注意，只要不能同时满足上面两个条件，就属于非简单请求。

2. 非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是 PUT 或 DELETE ，或者 Content-Type 字段 的类型是application/json 。

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为 " 预检 " 请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词 和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest 请求，否则就报错 。

4 实现

1. 编写配置类，配置了跨域访问的属性

5 什么是跨域问题

1. 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。最简单的说就是从当前域名的网站下不能请求非同源的地址

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。

请特别注意：跨域问题是针对于浏览器的，因为需要解决的跨域问题，是浏览器施加的安全限制所造成的。

2. 跨域是指跨域名的访问，有三种情况：

1. 域名不同的跨域。
2. 域名相同、端口不同的跨域。
3. 二级域名不同的跨域。

3. 举例说明:

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

4. 跨域会阻止什么操作？

浏览器是从两个方面去做这个同源策略的

一是：针对接口的请求 

二是：针对Dom的查询

这点就能够很好的防止别人把你经常访问的网页嵌入到iframe中来获取你的个人信息，比如a页面中嵌入了iframe，src为不同源的b页面，则在a中无法操作b中的dom，也没有办法改变b中dom中的css样式。