服务器同源策略/解决跨域请求
1.服务器同源策略
- 同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。
- 同源指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可。
- 同源策略就是为了保证网站的数据安全而存在。
2.URL构成:
- url:http://image.baidu.com:80/search/detail?ct=503316480&z=undefined#header
- http ---- 超文本传输协议
- [image.baidu.com] ---- 域名
- 80 ---- 端口
- /search/detail ---- 资源目录
- ct=503316480&z=undefined ---- 发送到服务器的数据
- #header ---- 锚点
3.跨域
4.解决跨域问题的办法
1.jsonp方法
function jsonp(options){
window[options.callbackName] = options.success;
var data = '';
if (typeof options.data === 'string'){
data = options.data;
}
if (typeof options.data === 'object' && options.data !== null && options.data.constructor === Object){
for (var key in options.data){
data += key+'='+options.data[key]+'&';
}
data = data.substring(0,data.length-1);
}
var Script = document.createElement('script');
Script.src = options.url+'?'+ options.cb +'='+options.callbackName+'&'+data;
document.body.appendChild(Script);
Script.onload = function (){
document.body.removeChild(Script);
}
}
1.2.jQuery 发送jsonp请求
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"flightHandler",
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
2.CORS 跨域资源共享(xhr2)
- CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)
- 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
- 整个CORS通信过程,都是浏览器自动完成,不需要用户参与
- 对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样
- 实现CORS通信的关键是服务端,只要服务端实现了CORS接口,就可以跨源通信
- 示例:
实现CORS并不难,只需服务端做一些设置即可:如
<?php
header("Access-Control-Allow-Origin:*");
注意:IE10以下不支持CORS
3.代理跨域
- 在服务器上配置代理,然后请求代理标识符D:\phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts\localhost_80.conf
# 配置代理
# https://www.duitang.com/napi/vienna/feed/list/by_common/?start=0&limit=18
# 当我们请求 http://localhost/dt 时,Nginx转发到 https://www.duitang.com/napi/vienna/feed/list/by_common/
location = /dt {
proxy_pass https://www.duitang.com/napi/vienna/feed/list/by_common/;
}
!!! 以上是DaXiong本人对前端知识的理解总结,如内容知识有错误可以留言修改。
!!!如果以上内容帮助到了你,点击一下赞或者收藏吧!