跨域的几种解决方案你了解吗？

章北海01

已于 2022-10-17 10:24:18 修改

阅读量627

点赞数

文章标签： servlet

于 2020-10-02 14:48:25 首次发布

本文链接：https://blog.csdn.net/qq_33274797/article/details/108901737

版权

1.什么是跨域？

一个域下的脚本去请求另外一个域下的资源，因为同源策略的原因导致请求失败。

2.什么是同源策略？

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

3.同源策略限制部分？

1、Cookie、LocalStorage 和 IndexDB 无法读取。

2、DOM 无法获得。

3、AJAX 请求不能发送。

4.什么是同源什么是非同源？

同源必须符合3个相同点：
1、协议相同
2、域名相同
3、端口相同

举例例来说，http://www.sizong.com/dir/page.html这个网址，协议是http://，域名是www.sizong.com，
端口是80（默认端口可以省略）。它的同源情况如下:

1、http://www.sizong.com/dir2/other.html：同源
2、http://v2.www.sizong.com/dir/other.html：不同源（域名不同）
3、http://www.sizong.com:81/dir/other.html：不同源（端口不同）
4、https://www.sizong.com/dir2/other.html： 不同源（协议不同）
......省略




同源策略存在场景（以下内容摘抄网上）：
A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生
什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用
来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时
还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

JSONP实现跨域

不知道大家有没有注意到，我们平时在开发中使用<script>的src属性或者<img>标签的src属性，
可以直接获取第三方的js资源或者图片。但是实际上src属性是发出了一个get请求，并且没有被这个同源
策略限制。

想必大家看到这块，应该已经知道了JSONP的原理。其实就是通过动态的创建<srcipt>标签，利用src属性
进行跨域资源访问。这也就限制了JSONP这种方式只能发送GET请求。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1593106255,4245861836&fm=26&gp=0.jpg"/>
	</body>
</html>

JQuery发送JSONP请求


<script type="text/javascript">
	$("#btn").click(function(){
		$.ajax({
			url:"http://localhost:6001/api/rest/jsonp",
			type:"get",
			dataType:"jsonp",
			jsonpCallback:"func",
			jsonp:"callback",
			success:function(res){
				console.log(res);
			},
			error:function(err){
				
			}
		})
	});
</script>

com.fasterxml.jackson.databind.util.JSONPObject

@GetMapping("/jsonp")
public JSONPObject onPost1(String callback) {

	Map<String,Object> map = new HashMap<>();
	map.put("code",200);
	map.put("data","jsonp请求成功");
	JSONPObject jsonpObject = new JSONPObject(callback,map);
	return jsonpObject;
}

CORS跨域资源共享

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

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

注意：
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域请求。整个CORS通信过程，都是浏览
器自动完成，不需要用户参与。


CORS请求分为两种：
1.简单请求
2.非简单请求

CORS跨域资源共享-----简单请求

请求方法是以下三种方法之一：
1、HEAD
2、GET
3、POST

HTTP的头信息不超出以下几种字段：

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

凡是不同时满足上面两个条件，就属于非简单请求。

简单请求的基本流程：

浏览器直接发出CORS请求，并会在头信息Headers添加Origin字段。

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded;charset=UTF-8
Host: localhost:6001
Origin: http://127.0.0.1:8848
Referer: http://127.0.0.1:8848/1020/index.html

上图的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，
决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信
息没有包含Access-Control-Allow-Origin字段（上图中看响应头），就知道出错了，从而抛出一个错误，被
XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可
能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。看下面的截图，
此截图访问时服务器已经配置CORS。

前端发送请求

<script type="text/javascript">
	$("#btn").click(function(){
		$.ajax({
			url:"http://127.0.0.1:6001/api/rest/simple",
			type:"GET",
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			xhrFields: {
			   withCredentials: true //允许跨域带Cookie
			},
			success:function(res,status,xhr){
				console.log(res);
				console.log(status); 
				console.log(xhr.getResponseHeader('SiZong'));
			},
			error:function(err){
				
			}
		})
	});
</script>

@RestController
@RequestMapping("/api/rest")
public class TestRestTemplateController extends BaseController {

    @GetMapping("/simple")
    public JSONObject onPost1(HttpServletRequest request, HttpServletResponse response) {
        if(null != request.getCookies()){
            for (Cookie cookie : request.getCookies()) {
                logger.info(cookie.getName()+"===="+cookie.getValue());
            }
        }
        response.setHeader("SiZong","Hello SiZong");
        return ResultTool.successData("简单CORS请求");
    }
}

SpringBootCORS配置

@Configuration
public class CorsConfig {

   public CorsConfiguration buildConfig(){
       CorsConfiguration corsConfiguration = new CorsConfiguration();
       /**
        * 允许跨域请求来源
        * 注意 如果要接收前端发送过来的Cookie
        * Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名
        */
       corsConfiguration.addAllowedOrigin("http://127.0.0.1:8848");
       corsConfiguration.addAllowedHeader("*");//允许任何头信息
       corsConfiguration.addAllowedMethod("*");//允许任何方式
       corsConfiguration.addExposedHeader("SiZong");//允许前端跨域请求从响应的headers获取key为SiZong的值
       corsConfiguration.setAllowCredentials(true); //支持跨域上传文件、Cookie
       corsConfiguration.setMaxAge(3600l);
       return corsConfiguration;
   }

   @Bean
   public CorsFilter corsFilter(){
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
     source.registerCorsConfiguration("/**",buildConfig());
     return new CorsFilter(source);
   }

}

上图中有几个比较重要的数据

1、Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

2、Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如
果服务器不要浏览器发送Cookie，删除该字段即可。

3、Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，
xhr.getResponseHeader('SiZong')可以返回SiZong字段的值。

//允许前端跨域请求从响应的headers获取key为SiZong的值
corsConfiguration.addExposedHeader("SiZong");

response.setHeader("SiZong","Hello SiZong");

success:function(res,status,xhr){				
   console.log(xhr.getResponseHeader('SiZong'));
},

4、跨域携带cookie
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定
Access-Control-Allow-Credentials字段。

corsConfiguration.setAllowCredentials(true); //支持跨域上传文件、Cookie

另一方面，开发者必须在AJAX请求中打开withCredentials属性。
xhrFields: {
  withCredentials: true //允许跨域带Cookie
},

注意：
如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的
域名。

CORS跨域资源共享-----非简单请求

非简单请求如PUT、DELETE，或者Content-Type字段的类型是application/json等等。

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


"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，
表示请求来自哪个源。


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


1、Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求用到HTTP方式。
2、Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。


预检请求的回应:

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

会回应以下信息(只保留关键信息)
Access-Control-Allow-Origin: http://127.0.0.1:8848
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age:1728000

1、Access-Control-Allow-Origin
允许来源域请求。
2、Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。
注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
3、Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是
必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求
的字段。
4、Access-Control-Allow-Credentials
允许携带cookie
5、Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），
即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

注意：
一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin
头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

章北海01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域的几种解决方案你了解吗？

1.什么是跨域？一个域下的脚本去请求另外一个域下的资源，因为同源策略的原因导致请求失败。2.什么是同源策略？1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。3.同源策略限制部分？1、Cookie、LocalStorage 和 IndexDB 无法读取。2、DOM 无法获得。3、AJAX 请求不能发送。4.什么是同源什么是非同源？同源必须符合3个相同点：1、.
复制链接

扫一扫