js跨域资源共享 基础篇

本文详细介绍了javascript跨域资源共享，供大家参考，具体内容如下

1.为什么提出跨域资源共享(CORS)?
    因为XHR实现ajax的安全限制是：XHR 对象只能访问与包含它的页面位于同一个域中的资源

2.如何实现跨域？（跨浏览器）

  // 跨浏览器创建并返回CORS对象
  // param method : 请求的方式, get or post
  // param url : 跨域请求的url
  // return xhr : 返回的跨域资源对象
  function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
      xhr.open(method, url, true);  // CORS都是通过异步的请求
    } else if (typeof XDomainRequest != "undefined"){  // IE
      vxhr = new XDomainRequest();
      xhr.open(method, url);
    } else {
      xhr = null;
    }
    return xhr;
  }
  var request = createCORSRequest("get", "http://localhost/aaa/dome2.php");
  if (request){
    // 用于替代onreadystatechange 检测成功，表示接受数据完毕
    request.onload = function(){
      // 对响应的信息进行处理
      alert(request.responseText);  // 取得响应的内容
    };
    // 用于替代onreadystatechange 检测错误。
    request.onerror = function(){
      // 对响应的信息进行处理
    };
    // 用于停止正在进行的请求。
    request.onabort = function(){
      // 对响应的信息进行处理
      alert(request.responseText);
    };
    // 跨域发送请求
    request.send();
  }

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • Javascript 基础---Ajax入门必看

    Javascript 基础---Ajax入门必看

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

  • JavaScript基础语法之js表达式

    本文将详细介绍javascript表达式,表达式分为原始表达式和复杂表达式.一般,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression). 原始表达式(primary exression) 原始表达式是表达式的最小单位--它不再包含其他表达式.javascript中的原始表达式包括this关键字.标识符引用.字面量引用.数组初始化.对象初始化和分组表达式 PrimaryExpres

  • JS基础随笔(菜鸟必看篇)

    JS基础随笔(菜鸟必看篇)

    在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

  • javascript基础知识

    1.var msg;//声明一个变量,在没有给此变量赋值以前,该变量名为:undefined 2.msg = "hello";//不适用var则可以声明一个全局变量,但是此变量因为是全局的,所以容易引起其他调用的一些问题,故不推荐 3.javaScript有5种基本数据类型,Undefined.Null.Boolean.Number和String:以及一种复杂数据类型:Object 4.var num=076;//代表的八进制,以0开头,假如后面的数值超出8的范围,例:08.079等,

  • JavaScript基础知识点归纳(推荐)

    定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

  • JavaScript基础重点(必看)

    接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景 相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法 常规语法省略 重点强调: 1.原始值和对象:原始值包括布

  • js跨域资源共享 基础篇

    本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)?     因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨浏览器) // 跨浏览器创建并返回CORS对象 // param method : 请求的方式, get or post // param url : 跨域请求的url // return xhr : 返回的跨域资源对象 function createCORSR

  • 你可能不知道的CORS跨域资源共享

    你可能不知道的CORS跨域资源共享

    什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cross-Origin Resource Sharing)跨域资源共享. CORS背后的原理是:使用自定的HTTP头部与服务器进行沟通,从而由服务器决定响应是否成功. 了解下同源策略 源(origin)*:就是协议.域名和端口号: 同源: 就是源相同,即协议.域名和端口完全相同: 同源策略:同源策略是浏

  • JSONP解决JS跨域问题的实现

    现代编程中前后端都已经是分开部署了,前端有自己的域,后端也有自己的域.由于浏览器同源策略的限制,非同源下的请求,就会产生跨域问题.解决跨域问题的方法有很多种,例如CORS(cross orign resources share)和JSONP.这里我就着重介绍一下jsonp的解决方案. 一:基础概念 同源策略:同一协议,同一域名,同一端口号.只要不满足三者其中一种都是属于跨域问题. 举几个简单的例子 1: https://www.a.com:8080到http://www.a.com:8080的请

  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

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

  • js跨域问题浅析及解决方法优缺点对比

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

  • 浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get

  • Django跨域资源共享问题(推荐)

    最近做了一个前后端分离的web项目,其中我司职后端,使用django框架.在前后端集成测试的时候,就遇到了一些web安全相关的问题,cors跨域资源共享就是其中之一. cors问题介绍 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源本身所在的服务器不同的域.协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求. CORS机制允许 Web

  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    跨域解决方案   jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMessage window.name WebSocket react的代理实现跨域 在配置在src/setupProxy.js文件,并通过npm安装http-proxy-middleware,代理中间件模块 创建 src/setupProxy.js 安装模块 npm i -S http-proxy-middleware    const {createProxyMiddleware: proxy}

  • JS跨域之window.name实现的跨域数据传输

    一. window.name的性质 window.name有一个奇妙的性质,页面如果设置了window.name,那么在不关闭页面的情况下,即使进行了页面跳转location.href=...,这个window.name还是会保留. 我们可以在控制台做一下实验: // 打开浏览器输入URL:www.jb51.net //F12打开控制台 //在控制台中依次输入下面内容 //输入 window.name; //返回 '' //输入 window.name='test'; //返回 'test' /

  • JS跨域(Access-Control-Allow-Origin)前后端解决方案详解

    浏览器的同源安全策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收.同源:协议 + 域名 + 端口.所以,怎么才算跨域呢? 什么是跨域 什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.co

随机推荐