跨域问题处理

1、跨域解释

什么是跨域:

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略(所谓的同源是指,域名、协议、端口均为相同。)造成的,是浏览器施加的安全限制。
同源策略限制了以下行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 JS 对象无法获取
  • Ajax请求发送不出去

\

  • http://www.yueshuge.cn 调用 http://www.yueshuge.cn                  非跨域
  • http://www.yueshuge.cn 调用 http://www.baidu.com                      跨域,主域名不同
  • http://www.yueshuge.cn 调用 http://abc.yueshuge.cn                      跨域,子域名不同
  • http://www.yueshuge.cn 调用 https://www.yueshuge.cn                跨域,协议不同
  • http://www.yueshuge.cn 调用 http://www.yueshuge.cn:8080       跨域,端口不同
2、如何解决跨域

网上有很多种解决方案,我只描述使用过的

    • Java代码,在过滤器中添加如下代码,运行开启跨域策略

response.setHeader(“Access-Control-Allow-Credentials”,”true”);
response.setHeader(“Access-Control-Allow-Origin”, request.getHeader(“Origin”));
//支持头部requestHeader
response.setHeader(“Access-Control-Allow-Headers”, “x-requested-with,Content-Type,A,I,H”);

  • ajax实现
$.ajax({
type: “post”,
timeout: 30000,
data: data,
url: $webroot + url,
xhrFields: {
withCredentials: true
},
crossDomain: true,
dateType: ‘json’,
beforeSend: function(request) {
request.setRequestHeader(“H”, “召唤神龙”);
},
success: function (data) {
$ionicLoading.hide();
callback instanceof Function && callback(data);
},
error: function () {
$return.Alert(“响应超时,请稍候再试!”);
$ionicLoading.hide();
}
});
注意request.setRequestHeader(“H”, “召唤神龙”);必须与Access-Control-Allow-Headers中的x-requested-with,Content-Type,A,I,H设置对应
3、H5测试小记录
浏览器测试加”C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –allow-file-access-from-files