跨域

Myth丶恋晨 2022-01-20 04:35 327阅读 0赞

### 1、同源： ###

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同   1.1目的：保护用户信息安全   1.2限制：cookie、localStorage和IndexDB无法读取   无法操作跨域的iframe里的dom元素   ajax请求不能发送

### 2、解决 ###

#### 一、 jsonp ####

实现： script标签拥有跨域能力， 将服务端数据以函数参数的形式传递，接口返回的数据以该函数包裹的形式返回给前端

#### 二、 利用document.domain + iframe跨域 ####

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：([www.domain.com/a.html][www.domain.com_a.html])

2.）子窗口：([child.domain.com/b.html][child.domain.com_b.html])

三、 跨域资源共享（CORS） 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可， 若要带cookie请求：前后端都需要设置。 需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

1、 前端设置：

1.）原生ajax

// 前端设置是否带cookie
    xhr.withCredentials = true;
    示例代码：
    
    var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
    
    // 前端设置是否带cookie
    xhr.withCredentials = true;
    
    xhr.open('post', 'http://www.domain2.com:8080/login', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    复制代码

2.）jQuery ajax

$.ajax({
        ...
       xhrFields: {
           withCredentials: true    // 前端设置是否带cookie
       },
       crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
        ...
    });
    复制代码

[www.domain.com_a.html]: https://link.juejin.im?target=http%3A%2F%2Fwww.domain.com%2Fa.html
[child.domain.com_b.html]: https://link.juejin.im?target=http%3A%2F%2Fchild.domain.com%2Fb.html