跨域解决方案CORS使用方法

CORS(Cross-Origin Resource Sharing), 目前CORS还处于w3c的草案,它定义了跨域访问时服务器和客户端之间如何通信。他的原理是通过定义HTTP头部的信息,来让客户端和服务器互相确认,从而决定是否相应本次请求。

兼容性: IE10+  chrome21+  firefox21+  safari5.1+  opera12.1+ (IE8, 9中使用XDomainRequest)

    详见 http://caniuse.com/cors , 可通过(new XMLHttpRequest).withCredentials !== undefined判断

客户端:

 1 function compatibleCORS(method, url) {
 2     var xhr = new XMLHttpRequest();
 3     if (xhr.withCredentials !== undefined) {
 4         xhr.open(method, url, true);
 5     } else if (typeof XDomainRequest !== "undefined") {
 6         //XDomainRequest是IE用于支持CORS请求的对象
 7         xhr = new XDomainRequest();
 8         xhr.open(method, url);
 9     } else {
10         xhr = null;
11     }
12     return xhr;
13 }
14
15 var xhr = compatibleCORS(‘GET‘, "your url");
16 if (!xhr) {
17     throw new Erorr("CORS不被支持");
18 }

服务端:

  通过设置http响应头Access-Control-Allow-Origin: www.xxx.com(这里可以是*, 代表接受任意域名的跨域申请, 但为了安全策略, 一般情况下不要这样做)

  这样客户端的代码就能得到响应

跨域解决方案CORS使用方法,布布扣,bubuko.com

时间: 2024-10-16 14:55:28

跨域解决方案CORS使用方法的相关文章

AJAX POST&跨域 解决方案 - CORS

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource

(转) AJAX POST&跨域 解决方案 - CORS

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource

跨域解决方案与提交订单

跨域解决方案与提交订单 课程目标  目标 1:掌握跨域请求 CORS 解决方案目标 2:完成结算页收货人地址选择功能目标 3:完成结算页支付方式选择目标 4:完成结算页商品清单功能目标 5:完成保存订单功能 1.商品详细页跨域请求  1.1 需求分析  从商品详细页点击“加入购物车”按钮,将当前商品加入购物车,并跳转到购物车页面. 1.2 JS 跨域请求  这里说的 js 跨域是指通过 js 在不同的域之间进行数据传输或通信,比如用 ajax 向一个不同的域请求数据,或者通过 js 获取页面中不

Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持

Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致  推荐1 2. Apache 反向代理 推荐1 3. jsonp ,2 4. CORS ,2 5. iframe+post3 6. 回调解决方案>>服务端推送dwr 反向ajax3 7. 服务器中转 3 8. Js跨3 9. 从所有的浏览器都支持来看,CORS将成为未来跨域访问的标准解决方案3 10. 参考4 1. 设置 document.do

Ajax请求的跨域(CORS)问题

用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时,会碰到跨域(CORS)问题. CORS:Cross-Origin Resource Sharing 什么是跨域? 简单的来说,出于安全方面的考虑,浏览器页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间的通信. 解决方法: 基本的解决思路就是利用filter在response中加入一个头"Access-Contro

跨域解决方案二:使用JSONP实现跨域

跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家分享. JSONP跨域原理探秘 我们知道,使用 XMLHTTPRequest 对象发送HTTP请求时,会遇到 同源策略 问题,域不同请求会被浏览器拦截. 那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢? 换句话说,不使用 XMLHTTPRequest 对象是否可以发送

前端常见跨域解决方案(全)

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

JSON跨域解决方案收集

最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域传递信息,这样就催生出多种跨域方法. 1. 具备src的标签 原理:所有具有 src 属性的HTML标签都是可以跨域的 在浏览器中, <script> . <img> . <iframe> 和 <link> 这几个标签是可以加载跨域(非同源)的资源的,并且加载的

前端常见跨域解决方案

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入:<link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景