同源&JSNOP&跨域

同源策略

协议、域名、端口号参考JavaScript-Bom属性及其方法1

• 同协议：如都是http或者https
• 同域名：如都是http://baidu.com/a 和http://baidu.com/b
• 同端口：如都是80端口

⚠️只有 协议、域名、端口号一模一样才能发送 AJAX 请求

对于突破同源限制，成功发送AJAX请求的叫做跨域如：

• JSONP (JSON width padding)

• CORS (Cross Origin Resource Sharing)跨域资源共享

---

跨域

就是判断当前页面的url是否与发送AJAX请求的的地址遵循同源策略，不遵循则就是跨域
最常见的跨域的方式有:
-JSONP

-CORS

---

JSONP

JSONP的实现是利用script标签发送请求是不受域名限制的，比如我们可用script标签引入Jquery

JSONP实现的流程：

请求方：前端(浏览器)：

1. 动态创建一个script标签，设定script的src为指定的响应方。

2. 给script的src指定一个查询参数如 ?callback=xxx(?后面的为查询参数，xxx为前端定义的一个查询参数对应的『全局函数』)

3. 浏览器接收到响应之后，就会执行xxx.call(undefined, /* 服务器传送的数据*/)

4. 请求方就知道了他要的数据来了

响应方：后端(服务器)：
浏览器端发送的查询是否存在 callback参数通过query.callback(具体查看🌰)，如果存在就会响应把(query.callbak.call(undefined, data))给请求端， data为请求端想要服务端传递的数据，一般为非JSON格式，通过情况下需要使用JSON.stringify(data)转为为JSON格式的字符串

// 没有callback这个参数就直接把发送回去(响应体)
if(pathObj.query.callback){
  // 最关键的一步
  // pathObj.query.callback.call(undefined, param)
  res.end(pathObj.query.callback + '(' + JSON.stringify(PlayerData) + ')')
}else{
  // 没有没有callback这个参数就直接把发送回去
  res.end(JSON.stringify(PlayerData))
}

JSONP demo 🌰示：

将请求的球员的数据展示在页面：JSONP-GitHub

---

Jquery JSONP

注意⚠️：JSONP并不是AJAX的一种形式，只是在Jquery的AJAX中出现了这种情况而已
🌰1

$.ajax({
  url: "http://xxxx.com:8081/ask",
  dataType: "jsonp",
  success: function( response ) {
    if(response === 'success'){
      // ...
     }
   }
 })

🌰2

$.ajax({
  url: //...,
    dataType: 'jsonp',
}).done(function (result) {
    console.log(result)
})

注意：使用JSONP需要知道的是JSONP并不支持POST方法
原因：

• 因为JSONP是通过动态创建script标签实现的

• 动态创建的script只能用 get 二不能用 post

---

CORS-Cross-Origin Resource Sharing跨域资源共享

使用XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin: http://xxx.com; 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

后端加一个语句即可，声明哪些domain可以跨域(即是不遵循同源策略)

res.setHeader('Access-Control-Allow-Origin', /* 允许同源访问的网站*/)
// res,setHeader的第二参数的值与浏览器的 Origin包含的值一样则就可以支持同源访问

//res.setHeader('Access-Control-Allow-Origin','*') 
// * 表示支持其他任意非同源的网站访问

---

版权声明：本文为博主原创文章，未经博主许可不得转载