跨域小笔记

跨域

一、什么是跨域

当一个请求的url 的协议、域名、端口任意一个与当前页面的url不同即为跨域

a页面想获取b页面的资源，a与b页面的协议、域名或端口号不同，进行的访问行为都是跨域，由于浏览器的同源策略，会限制跨域请求资源。

当前页url	请求url	是否为跨域
http://test.com/	http://test.com/show.html	不是
http://www.test.com/	https://www.test.com/index.html	是（协议不同）
http://www.test.com/	http://www.baidu.com/	是（域名不同）
http://www.test.com:8080/	http://www.test.com:7001/	是（域名）
http://www.a.com:8080/index.html	https://www.a.com:8080/style.css	是（协议）

二、同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"：

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

同源策略确保一个应用中的资源只能被本应用的资源访问。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxHwqC50-1635081659150)(跨域\微信图片_20210818213733.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tw2ZDKdq-1635081659162)(跨域\微信图片_20210818215633.png)]

非同源限制

cookie、localStorage、indexDB无法读取
DOM和js对象无法获取
无法发送Ajax请求

三、跨域的解决办法

常用跨域的解决方案有jsonp、cors、Nginx等

CORS

CORS（Cross-Origin Resource Sharing）是一个W3C标准，全称“跨域资源共享”

它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而解决Ajax只能同源使用的限制

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

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

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

3.1、两种请求

浏览器将cors请求分为两类：简单请求和非简单请求

只要同时满足以下条件，就属于简单请求

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

凡是不满足以上条件，就属于非简单请求

3.1.1、简单请求

对于简单请求，浏览器直接发送请求。在请求头信息中，添加一个Origin字段，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求

Origin: http://localhost:8083

服务端处理

Access-Control-Allow-Origin: http://localhost:8083
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求

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

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

CORS请求默认不发送Cookie数据，如果要传送cookie数据，则需在前端Ajax请求中打开withCredentials属性

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

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

3.1.2、非简单请求

预检请求

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

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

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

服务端处理

Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。

Access-Control-Max-Age：1728000
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

3.2、CORS常用解决跨域的方法

前端发送Ajax请求

<script src="jquery-1.8.3.js"></script>
<button id="test">测试</button>
<script>
    $("#test").click(function(){
        $.ajax({
            url : "http://localhost:8084/show.cors",
            type : "GET",
            success : function(result){
                // alert(result);
                console.log(result)
            }
        })
    })
</script>

3.2.1、HttpServletResponse添加头信息

@RestController
public class CorsController {

    @RequestMapping(value = "/look.cors")
    public String look(HttpServletResponse response){
        response.addHeader("Access-Control-Allow-Origin","http://localhost:8083");
        //response.addHeader("Access-Control-Allow-Credentials","true");
        return "hello cors";
    }
    
}

3.2.2、使用Spring注解@CrossOrigin

@RestController
public class CorsController2 {

    @RequestMapping(value = "/show.cors")
    @CrossOrigin(origins = "http://localhost:8083")
    /*	@CrossOrigin	也可配置在类上
    	属性:
    	origins				允许跨域请求的url
    	methods				表明服务器支持的跨域请求的方法
    	maxAge				预检的有效期
    	allowCredentials	是否同意接收cookie
    */
    public String show(){
        return "hello cors";
    }
}

3.2.3、通过配置类解决跨域

使用HttpServletResponse对象或注解方式，需要在每个需要跨域的方法上都加上相应的注解或参数，我们想让所有的controller都添加跨域功能，我们可以通过实现WebMvcConfigurer接口来自定义跨域配置

WebMvcConfigurer是一个接口，提供很多自定义的拦截器，例如跨域设置、类型转化器等springMVC的配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    /**
     * **addMapping**：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
     *
     * **allowedMethods**：允许所有的请求方法访问该跨域资源服务器，如：POST、GET、PUT、DELETE等。
     *
     * **allowedOrigins**：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如：”[http://www.aaa.com](http://www.aaa.com/)“，只有该域名可以访问我们的跨域资源。
     *
     * **allowedHeaders**：允许所有的请求header访问，可以自定义设置任意请求头信息。
     
     	allowCredentials：是否同意接收cookie
     
     * @param registry
     */
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*.cors")
                .allowedOrigins("http://localhost:8083")
            	.allowedMethods("POST","GET")
	            .allowCredentials(true)
                .maxAge(1000);
    }
}

面试题

为什么要跨域？

跨域，由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
即浏览器不能执行其他网站的脚本。

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

怎么解决跨域问题

在服务器端通过检查请求头部的origin，从而决定请求应该成功还是失败。具体的方法是在服务端设置Response Header响应头中的Access-Control-Allow-Origin为对应的域名，实现了CORS（跨域资源共享）。