浏览器同源策略、跨域解决方案JSONP、CORS

比眉伴天荒 2022-01-31 01:41 329阅读 0赞

--------------------

**[HTTP访问控制（CORS） - HTTP | MDN][HTTP_CORS_ - HTTP _ MDN]**

--------------------

### 同源策略 ###

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

**同源的定义：** 两个页面的协议，域名，端口相同。

如果两个脚本非同源，会有三个行为受到限制：

1.  DOM 无法获得；
2.  Cookie、LocalStorage 和 IndexDB 无法共享；
3.  Ajax 请求限制；

跨域限制主要的目的就是为了用户的上网安全。

### 跨域的解决方法 ###

对于 Ajax 跨域解决方案，通常来说有三种：JSONP、CORS、代理服务器

#### JSONP ####

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

通过 script 标签向服务器端发起请求不受浏览器同源策略的限制。而服务器端在接受到请求后，可以返回一个指定名字的函数，该函数的参数是需要返回的数据。  
1.）原生实现：

服务端返回如下（返回时即执行全局函数）：

handleCallback({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({ 
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "handleCallback",    // 自定义回调函数名
        data: { }
    });

3.）vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', { 
        params: { },
        jsonp: 'handleCallback'
    }).then((res) => { 
        console.log(res); 
    })

##### jsonp缺点： #####

只能实现get一种请求。

--------------------

#### CORS（跨域资源共享） ####

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

#### 代理服务器 ####

代理服务器是指通过设置一个同源的代理服务器，然后将我们的 Ajax 请求发送到我们的代理服务器上，再通过代理服务器去向实际的服务器去请求数据，最后通过代理服务器返回给浏览器。  
通过设置代理服务器来规避浏览器同源策略的限制，其原理是服务器之间的资源请求并没有同源策略的限制。但是由于操作起来并不方便，所以在实际开发中并不会经常用这种方法来解决问题。

[HTTP_CORS_ - HTTP _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS