同源:同域名/同端口/同协议
http://baidu.com:8080?user=name&pwd=password
http:协议
baidu.com:域名
8080:端口
user=name&pwd=password:地址参数
为什么跨域:
浏览器同源策略:一是针对接口的请求,二是:针对DOM的查询
为什么要有同源策略:
针对接口的请求:
1:cookie用来处理登录等场景(让服务器知道是谁发出的请求),验证通过响应头加入Set-Cookie字段,下次再发请求,浏览器会自动将cookie附加在HTTP请求的头字段cookie中,服务器知道该用户已经登陆过。
2:操作登陆某一个网站A,登陆成功后
3:同时点击进另一个网站B。
4:假如没有同源策略限制,A的cookie将会附加在HTTP请求头字段Cookie中,向B的服务器保存cookie;这就是传说中的CSRF攻击
5:当然即使有同源策略,明文cookie还是一样能拿下来。但是服务端可以设置httpOnly,使得前端无法操作cookie
Dom查询:
同源策略是浏览器是浏览器最基本的安全机制
开发中解决浏览器同源策略方案:
跨域实现过程:(1)从A请求B.php,B.php的服务器返回一个header:Access-Control-Allow-Origin: A(*)
(2)如果请求的url是aspx页面,则需要在aspx页面中添加代码:Response.AddHeader("Access-Control-Allow-Origin", "*");
(3)如果请求的url是PHP页面,则需要在PHP页面中添加代码:header("Access-Control-Allow-Origin: *");
(4)如果请求的url是静态的html页面,则需要在页面中添加meta标签代码:<meta http-equiv="Access-Control-Allow-Origin" content="*" />
如果以上还不行,加上
//指定其他域名访问:header('Access-Control-Allow-Origin:*');
//响应类型:header('Access-Control-Allow-Methods:POST');
//响应头设置:header('Access-Control-Allow-Headers:x-requested-with,content-type');
//前端处理post请求: headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },