AJAX（XMLHttpRequest）进行跨域请求方法详解（二）

最新推荐文章于 2024-06-07 19:45:00 发布
最新推荐文章于 2024-06-07 19:45:00 发布
阅读量6.1w 收藏 54
点赞数 2
分类专栏： 浏览器兼容性编程 【ASP.NET 4.0】 JavaScript 文章标签： xmlhttprequest ajax windows asp.net 测试 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/net_lover/article/details/5172522
版权

注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。

 

2，预检请求

预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。下面的2种情况需要进行预检：
a，不是上面的简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求
b，在请求中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等

 

注意：在 iis 里进行测试，必须在“应用程序扩展”里面配置 .aspx 扩展的动作允许 OPTIONS。

下面我们举一个预检的请求：

上面的例子我们发送 xml 格式的数据，并且，发送一个非标准的HTTP头 POWERED-BY-MENGXIANHUI 来说明服务器端该如何设置响应头的。

在服务器端，PreflightedRequests.aspx 的内容如下：

点击“开始测试”按钮，将会执行下面的一系列请求。

 

以上的代码反映了预检请求的执行过程：首先发送 OPTIONS 请求头，用来向服务器咨询服务器的更多信息，以便为后续的真实请求做准备。比如是否支持 POST 方法等。值得注意的是：

浏览器还发送 Access-Control-Request-Method: POST 和 Access-Control-Request-Headers: powered-by-mengxianhui 请求头。

注意：以上过程是第一次请求的时候的过程，如果在 30 秒内重复点击按钮，你可以看不到 OPTIONS 这一过程。则执行过程是这样的：

 

 

为什么会这样？细心的童鞋可能注意到了，在服务器端有一行代码 Response.AddHeader("Access-Control-Max-Age", "30");  它是用来设置预检的有效时间的，单位是秒。这一点要特别注意。

孟子E章
关注
  • 2
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
Chrome Extension中跨域请求访问外部网站数据方法
06-20 3428
当时做Chrome扩展，用Javascript调用外部API总是不成功，会出现across origin error。后来发现跨域了，如果想在Chrome扩展中访问其他网站数据，只需在manifest.json文件中的”permission“中声明，再用xmlhttpRequest即可。详细介绍如下(转自360chrome的开发文档，同时可参考Chrome extension)： 跨域 X...
ajax跨域accept,AJAX（XMLHttpRequest）进行跨域请求方法详解
weixin_39870413的博客
08-05 602
注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下，...
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
朝阳39的博客
03-13 1187
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
32 _ 同源策略：为什么XMLHttpRequest不能跨域请求资源？
最新发布
所学所思
06-07 766
要了解什么是同源策略，我们得先来看看什么是同源。如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源。比如下面这两个URL，它们具有相同的协议HTTPS、相同的域名time.geekbang.org，以及相同的端口443，所以我们就说这两个URL是同源的。category=1category=0浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。两个不同的源之间若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
将网页设置为允许 XMLHttpRequest 跨域访问
kogu的博客
10-25 1万+
在非IE下，使用XMLHttpRequest 不能跨域访问， 除非要访问的网页设置为允许跨域访问。 将网页设置为允许跨域访问的方法如下： Response.AddHeader("Access-Control-Allow-Origin", "*"); 或指定域名下可以访问： Response.AddHeader("Access-Control-Allow-Origin", "h
1.XMLHttpRequest 的基本用法和防抖和节流的使用
shjd_J的博客
06-21 637
本章节讲解: XMLHttpRequest的概念、XMLHttpRequest的使用、GET请求携带参数、POST请求携带参数、数据交换格式JSON、ajax封装XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！主要的
前端缓存详解
huangpb的博客
09-26 6546
前言 缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。 一、按缓存位置分类 按缓存位置分类，可以分为：Service Worker，Memory Cache，Disk Cache。 在 Chrome 浏览器开发者工具的Network的Size栏会出现的四种情况： from ServiceWorker from memory cache from disk cache ...
XMLHTTPRequest对象不能跨域获取数据？！
weixin_30262255的博客
12-21 141
写了一小段代码，是用XMLHTTPRequest对象来获取数据的，在本地服务器中，运行的很顺利，但是转向实际服务器（实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来），运行就跑不起来了。 这就涉及到跨域获取数据的问题了。 我运行时的环境是这样的： 本地服务器运行当前代码、转向http://gumball.wickedlysmart.co...
AJAX 实现跨域请求
qq_16183731的博客
03-07 142
ajax 跨域请求实现： html 页面实现： //jsonp ajax 请求 function send(){ //obj.toJSONString(); 对象转json串 $.ajax({ type:"post", url:"http://127.0.0.1:8888/message/gee", async:true, data:{ name:"wangming"...
AJAX(XMLHttpRequest)进行跨域请求方法详解
02-11
AJAX(XMLHttpRequest)进行跨域请求方法详解 AJAX(XMLHttpRequest)跨域请求是指一个站点中的资源访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style标签加载外部样式表文件、通过img标签加载外部...
JSONP跨域请求实例详解
10-22
6. **XMLHttpRequest Level 2：** 支持跨域的Ajax请求，所有现代浏览器都已支持。 7. **WebSocket：** 实时双向通信，支持跨域。 8. **Server-Sent Events（SSE）：** 服务器向客户端单向推送数据。 9. **后台代理：...
js中跨域方法原理详解
12-02
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 比如，有个a.html页面，它里面的代码需要利用ajax获取一...
详解AngularJS如何实现跨域请求
10-21
首先，CORS是一种机制，允许Web应用在浏览器的同源策略限制下，通过XMLHttpRequest或fetch API请求跨域资源。在AngularJS中，我们主要利用$http服务来实现CORS请求。例如，发送GET请求： ```javascript $http.get('...
解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/LiuShengmei/Desktop/pull/data.txt‘
最初的梦想
05-13 2300
本地执行一个一个页面，用js动态的创建了一系列li，让其在页面上展示，获取数据的方式是通过json模拟，结果运行报错，如下： 首先声明，这种方式只是暂时的，浏览器一经关闭则不起作用了。以谷歌浏览器为例 首先，找到你浏览器安装的位置，一般默认安装的位置C:\Program Files\Google\Chrome\Application 然后、在该目录打开命令行，直接在文件夹导航栏输入cmd，敲回车 回车之后就进入了cmd命令行 输入命令chrome.exe --disable-web-security
Ajax本地跨域问题
CareChere的博客
06-27 1万+
配置chrome支持本地（file协议）ajax请求 配置chrome支持本地（file协议）ajax请求 网址：配置chrome支持本地（file协议）ajax请求 将html代码拖拽进入chrome通过file协议浏览时，发送的ajax请求本地文件，会报跨域错误。 XMLHttpRequest cannot load file:///E:/webs/extJS/ext-3.3.0/e
XMLHttpRequest 跨域时产生了 OPTIONS 请求
华府名安小书童的博客
05-08 1万+
【以下是转载内容】 码字很辛苦，转载请注明来自tuy博客的《XMLHttpRequest 跨域时产生了 OPTIONS 请求》一：前言对于跨域请求，一直没有采用jsonp方式，原因如下1.jsonp只支持get请求而不支持post请求,如果想传给后台一个json格式的数据,浏览器会返回一个415的状态码，告诉我们请求格式不正确，这让传输大规模数据变得繁琐。2.无法准确定位和调试请求异常情况3.存在...
前端学习（2442）：解决跨域问题
歌谣的博客
10-20 1531
1.同源策略如下： 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.a.com/b.js 同一域名，不同端口 不允许 http:
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
热门推荐
相濡以沫不如相望于江湖，是望着你不是忘了你。
09-16 13万+
Access to XMLHttpRequest at 'file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data,
原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项
qq_45287575的博客
02-24 6960
原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项
Ajax技术详解：XMLHttpRequest对象与POST请求
一旦创建了XMLHttpRequest对象，就可以使用`open()`和`send()`方法向服务器发送请求。`open()`方法接收三个参数：请求类型（GET或POST）、URL以及一个布尔值，表示是否异步执行。例如，发送一个GET请求： ```...
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值