跨域请求

跨域请求

产生原因

  同源策略:是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

  同源:指代域名(www.wikipedia.org => 指向208.80.152.2,当我们输入www.wikipedia.org时dns会帮我们解析成208.80.152.2),协议(如http,https),端口(如8080)相同

不受同源策略限制

  • 页面中的链接,重定向以及表单提交是不会受到同源策略限制的
  • 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的script、img、link、iframe等

跨域的解决

document.domain属性

  支持多域名站点,使用的字符串必须具有有效的域前缀或它本身,domain值中必须有一个点号

  例如:来自home.example.com的文档里的脚本想要合法的读取developer.example.com载入的文档的属性就可以把document.domain = ‘example.com’

特点(domain)

  • 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
  • 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞
  • 这种方法只适用于 Cookie 和 iframe 窗口

JSONP:使用script元素作为ajax传输的技术

  例如:a.com/jsonp.html想得到b.com/main.js中的数据

function addScriptTag(src) {
  var script = document.createElement("script");
  script.setAttribute("type", "text/javascript");
  script.src = src;
  document.body.appendChild(script);
}
window.onload = function() {
  addScriptTag("http://b.com/main.js?callback=foo"); // 请求地址
}; //window.onload是为了让页面加载完成后再执行
function foo(data) {
  console.log(data.name + "欢迎您");
}

特点(JSONP)

  • 只能使用Get请求
  • 不能注册success、error等事件监听函数,不能很容易的确定JSONP请求是否失败
  • JSONP是从其他域中加载代码执行,容易受到跨站请求伪造的攻击,其安全性无法确保

CORS

  Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范\

  • 服务器一般需要增加如下响应头的一种或几种
    • Access-Control-Allow-Origin: *
    • Access-Control-Allow-Methods: POST, GET, OPTIONS
    • Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
    • Access-Control-Max-Age: 86400
  • 跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数
    • “Access-Control-Allow-Credentials”: true
    • “withCredentials”: true // Ajax设置

window.name+iframe

window.postMessage()

nginx反向代理接口跨域


  转载请注明: 迷一样的自信 跨域请求

 上一篇
抽象相等比较算法 抽象相等比较算法
抽象相等比较算法  比较运算x==y, 其中x和 y是值,产生true或者false 若Type(x)与Type(y)相同, 则若x为null且y为undefined, 返回true 若Type(x)为Undefined, 返回true
2018-05-05
下一篇 
上传文件 上传文件
上传文件form表单提交<form action="url" method="get" enctype="application/x-www-form-urlencoded"> <input type="text" na
2018-04-25
  目录