跨域和同源

最新推荐文章于 2024-04-08 10:51:58 发布

Estelle_qi

最新推荐文章于 2024-04-08 10:51:58 发布

阅读量404

点赞数

分类专栏：浏览器文章标签：前端 nginx ajax跨域问题

本文链接：https://blog.youkuaiyun.com/qq_38713274/article/details/115295765

版权

浏览器专栏收录该内容

7 篇文章

订阅专栏

同源

概念

两个浏览器的域名、协议、端口相同，即说这两个浏览器是同源的。

限制

1、Cookie、LocalStorage 和 IndexDB 无法读取；
2、DOM 和 Js 对象无法获得，禁止对不同源页面 DOM 进行操作；
3、禁止使用 Ajax 对象向不同源的服务器地址发起 HTTP 请求

跨域

概念

跨域指浏览器不能执行其他网站的脚本，可以通过各种方式避开其安全限制。

跨域方案

1、JSONP

Jsonp 是 json 的一种"使用模式"，可以让网页从别的网站获取资料，即跨域读取数据。

实现

通过动态创建 script，再请求一个带参网址实现跨域通信。
1、声明一个回调函数（show），其函数名当作参数值，传递给跨域请求数据的服务器，函数形参为要获取的目标数据。
2、创建一个 script 标签，把跨域的API数据接口地址，赋值给 src，还要在这个地址中向服务器传递第一步创建好的回调函数函数名（可以通过问号传参？callback=show），服务器接收到请求后，需要进行特殊的处理，把传递进来的函数名和数据拼接成一个字符串，例如传递进来的函数名是 show，它准备好的数据是 show(‘内容’)。
3、最后服务器把准备的数据通过 HTTP 协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。

document.querySelector('.show').addEventListener('click',function(){
  var script = document.createElement('script');
  script.src = 'url?callback=show';
  document.head.appendChild(script);
  document.head.removeChild(script);
})

缺点

（1）JSONP 只支持 get，因为 script 标签只能使用 get 请求。
（2）JSONP 需要后端配合返回指定格式的数据。
（3）可能会遭受XSS攻击，不安全。

2、CORS

服务端设置Access-Control-Allow-Origin就可以开启CORS，客户端发起Ajax请求，看服务端Access-Control-Allow-Origin中是否包含域名，包含则进行跨域通信。

实现

document.querySelector('.show').addEventListener('click',function(){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'url', true);
  xhr.onload = function(){
  	if(xhr.readyState === 4){
  	  if((xhr.status>=200 && xhr.status<=300)|| xhr.status==304) { 
        show(JSON.parse(xhr.responseText)); 
      }
    } else { 
      console.log('error'); 
    }
  } 
  xhr.send();
})

简单请求

简单请求要同时满足以下两个条件：
（1）使用 GET / HEAD / POST 方法之一。
（2）Content-Type 的值为 text/plain、multipart/form-data、application/x-www-from-urlencoded 之一。

简单请求时，浏览器会在头信息中，增加一个 origin 字段，此字段用来说明本次请求来自哪个源，服务器根据这个值，决定是否同意这次请求。如果不在许可的范围，服务器会返回一个正常的HTTP回应。如果这个回应的头信息中没有包含 Access-Control-Allow-Origin 字段，就抛出错误。这种错误无法通过状态码识别。

复杂请求

不符合简单请求规则的便是复杂请求，复杂请求的CORS设置，会在正式通信之前，增加一次HTTP查询请求，称为预检请求，该请求是 option 方法，通过该请求知道服务端是否允许跨域请求。
预检请求中，浏览器先询问服务器，当前网页的域名是否在服务器的许可名单中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定答复，浏览器才会发出正式的XML请求，否则就会报错。