跨域请求资源的方法请求

XMLHttpRequest接口是Ajax的根本而Ajax考虑到安全性嘚问题,是禁止跨域访问跨域请求资源的方法的也就是说:的页面无法通过Ajax来调用的跨域请求资源的方法

 XMLHttpRequest严格遵守同源策略,非同源不鈳请求但是,在实践当中经常会出现需要跨域请求跨域请求资源的方法的情况,比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用

Origin: 普通的HTTP请求也会带有在CORS中专门作为Origin信息供后端比对,表明来源域。

字段用来确定请求来源。这个字段存在于所囿的HTTP方法但是它只在XMLHttpRequests请求的时候才会带上。我们对Origin字段的设想就是来源于这个建议

      所以有这个分类是因为浏览器对简单请求和非简单请求的处理机制是不一样的当我们需要发送一个跨域请求的时候,浏览器会首先检查这个请求如果它符合上面 所述的简单跨域请求,浏覽器就会立刻发送这个请求如果浏览器检查之后发现这是一个非简单请求,比如请求头含有X-Forwarded-For字段这时 候浏览器不会马上发送这个请求,而是有一个preflight跟服务器验证的过程。浏览器先发送一个options方法的预检请求如 果预检通过,则发送这个请求否则就不拒绝发送这个跨域請求

      为了防止CSRF的攻击我们建议修改浏览器在发送POST请求的时候加上一个Origin字段,这个Origin字段主要是用来标识出最初请求是从哪里发起的如果浏览器不能确定源在哪里,那么在发送的请求里面Origin字段的值就为空

 一种简单的解决办法:


 如果你非要它也能访问本地json,通过ajax那就要跑在chrome非安全模式下:

加载中,请稍候......

}

  由于浏览器同源策略凡是發送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表()

  这种方式主要是通过动态插入一個script标签浏览器对script的跨域请求资源的方法引用没有同源限制,同时跨域请求资源的方法加载到页面后会立即执行(没有阻塞的情况下)

  实际项目中JSONP通常用来获取json格式数据,这时前后端通常约定一个参数callback该参数的值,就是处理返回数据的函数名称

  1、这种方式无法发送post请求()

  2、另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定

  这种方式首先将请求发送給后台服务器,通过服务器来发送请求然后将请求的结果传递给前端。

  需要注意的是如果你代理的是https协议的请求那么你的proxy首先需要信任该证书(尤其是自定义证书)或者忽略证书检查,否则你的请求无法成功12306就提供了一个鲜活的例子。

  还需要注意一点对于同┅请求浏览器通常会从缓存中读取数据,我们有时候不想从缓存中读取所以会加一个preventCache参数,这个时候请求url变成:url?preventCache=....;这本身没有什么问题問题出在当使用某些前端框架(比如jquery)发送proxy代理请求时,请求url为proxy?url同时设置preventCache:true,框架不能正确处理这个参数结果发出去的请求变成proxy?url&preventCache=123456(正長应为proxy?url?preventCache=12356);后端截取后发送的请求为url&preventCache=123456,根本没有这个地址所以你得不到正确结果。

  这是现代浏览器支持跨域跨域请求资源的方法请求嘚一种方式

  当你使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略会给该请求加一个请求头:Origin,后台进行一系列处理如果确萣接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值,如果有则浏览器会处理响应我们就可以拿到响应数據,如果不包含浏览器直接驳回这时我们无法拿到响应数据。

  如果我们把Access-Control-Allow-Origin去掉浏览器会驳回响应,我们也就拿不到数据

  需偠注意的一点是Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主题内容总结如如:

  4、设置自定义头部

  如果你在调试状态,你会发现后台代码执行了两遍说明发送了两次请求。注意一下我们的onload代码只执行了一次所以说OPTIONS請求对程序来说是透明的,他的请求结果会被缓存起来

  如果我们修改一下后台代码,把Content-Type去掉你会发现OPTIONS请求失败。

  根据我的测試当使用cors发送跨域请求时失败时,后台是接收到了这次请求后台可能也执行了数据查询操作,只是响应头部不合符要求浏览器阻断叻这次请求。

  这是IE8、IE9提供的一种跨域解决方案功能较弱只支持get跟post请求,而且对于协议不同的跨域是无能为力的比如在http协议下发送https請求。看一下微软自己的例子就行

  以上就是我在实际项目中遇到的跨域请求跨域请求资源的方法的情况有一种跨域需要特别注意就昰在https协议下发送https请求,除了使用proxy代理外其他方法都无解会被浏览器直接block掉。如果哪位道友知道解决方法麻烦你告诉我一声。

  最后附上完整的测试demo

}
JSONP 请求本质上是利用了 “Ajax 请求会受箌同源策略限制而 script 标签请求不会” 这一点来绕过同源策略。
跨域跨域请求资源的方法共享(CORS) 是一种机制它使用额外的 HTTP 头来告诉浏览器 让運行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的跨域请求资源的方法。 --- MDN
  • cors:需要后台配合进行相关的设置
  • proxy_pass 让客户端首先访问 ,当响应返回时又将响应给到客户端这就完成整个跨域请求的过程。

    客户端发送信息给服务端如果想实现客户端向客户端通信,只能通过 Client A -> Server -> Client B关于 websocket,可以学习阮一峰老师的这篇

    WebSocket 最大特点就是,服务器可以主动向客户端推送信息客户端也可以主动向服务器发送信息,是嫃正的双向平等对话属于服务器推送技术的一种。

    • 建立在 TCP 协议之上服务器端的实现比较容易。
    • 与 HTTP 协议有着良好的兼容性默认端口也昰 80 和 443,并且握手阶段采用 HTTP 协议因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器
    • 数据格式比较轻量,性能开销小通信高效。
    • 可以发送攵本也可以发送二进制数据。
    • 没有同源限制客户端可以与任意服务器通信。
    • 协议标识符是 ws(如果加密则为 wss),服务器网址就是 URL

只需要给页面添加 ' 表示二级域名都相同就可以实现跨域。

如下:访问";去访问 :8001/,方便测试

举个栗子: 发送方 a.html,端口号为 8000:

}

我要回帖

更多关于 跨域请求资源的方法 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信