一、跨域概述
1.1 含义
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页”同源”。所谓”同源”指的是”三个相同”。
- 协议相同
- 域名相同
- 端口相同
举例来说:
http://www.example.com/dir/page.html
这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。
下面是同源和不同源的案例:
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)
1.2 目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,”同源政策”是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。
1.3 限制范围
随着互联网的发展,”同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。下面,我将详细介绍,如何规避上面三种限制。
解决方法
解决跨域问题,有如下三种方式:
1、使用jsonp
2、服务器代理
3、CORS技术
1、使用JSONP
jsonp解决跨域问题的原理是,浏览器的script标签是不受同源策略限制的,我们可以在script标签中访问任何域名下的资源文件。利用这一特性,用script标签从服务器中请求数据,同时服务器返回一个带有方法和数据的js代码,请求完成,调用本地的js方法,来完成数据的处理。
前端代码设置:
$.ajax({
url: "http://locahost:8080/serverManager/getNameList",
type:'get',
dataType: "jsonp",
//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonp: "callback",
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以不写这个参数,jQuery会自动为你处理数据
jsonpCallback:"getResult",
success: function(data){
},
error: function(){
alert('fail');
}
});
后台代码:
//1. http响应头部增加如下字段,这个可以不要嘛???,需要有待测试
Access-Control-Allow-Origin:*
//2.返回的字符串要符合jsonp格式,形如:
"getResult('json字符串')"
jsonp字符串:
例如:
jsoncallback({
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
})
从格式来看,jsonp是在json的基础上包装了一个方法名,此方法名是前端请求传过来的,如请求地址为:http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK
,那么方法名就是JSONP_CALLBACK。
jsonp的缺点:
1、JSONP是一种非官方的方法,而且这种方法只支持GET方法。
2、JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的.
2、服务器代理
这种方式运用的就是服务器的反向代理技术,控制客户端和服务器的访问都从代理服务器经过,比如用nginx作为服务器代理,在nginx上配置客户端和第三方服务的反向代理,这样就可保证客户端、第三方是同源的了,同一个源,都来自代理服务器。
关于nginx的反向代理配置,可访问我的这篇博客:http://blog.csdn.net/csdn_ds/article/details/58605591
缺点:
开发比较麻烦,对开发环境比较严格,需要在本机上配置代理服务器。
优点:
完美解决使用jsonp,第三方服务没有修改权限的问题。程序的代码侵入性小,代码级别不需要考虑跨域问题。
3、CORS技术
CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
在服务端设置response header中Access-Control-Allow-Origin字段。
浏览器报错
跨域前端使用ajax请求时,浏览器或给出这个报错信息·No 'Access-Control-Allow-Origin' header is present on the requested resource.
以上是项目中使用C++ 开发 http和https web server时,遇到问题记录,避免下次再次填坑。
更详细信息参考:
ajax跨域问题以及解决方案
https://blog.csdn.net/csdn_ds/article/details/73691134
ajax跨域,这应该是最全的解决方案了
https://segmentfault.com/a/1190000012469713
浏览器同源政策及其规避方法
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
跨域资源共享 CORS 详解
http://www.ruanyifeng.com/blog/2016/04/cors.html