同源策略
协议、域名、端口号参考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实现的流程：
请求方：前端(浏览器)：
- 动态创建一个
script标签，设定script的src为指定的响应方。
- 给
script的src指定一个查询参数如 ?callback=xxx(?后面的为查询参数，xxx为前端定义的一个查询参数对应的『全局函数』)
- 浏览器接收到响应之后，就会执行
xxx.call(undefined, /* 服务器传送的数据*/)
- 请求方就知道了他要的数据来了
响应方：后端(服务器)：
浏览器端发送的查询是否存在 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 🌰示：
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','*')
// * 表示支持其他任意非同源的网站访问
版权声明：本文为博主原创文章，未经博主许可不得转载
网友评论