js 设置header,实现跨域访问

cocos2d-js跨域访问问题,cocos2d-js请求网络数据 下面是cocos2d-js请求网络数据的代码: var HttpRequest = { /* * 网络请求之GET * url 请求的网络地址 * callback 回调参数 * */ GET:function(url,callback){ var xhr = cc.loader.getXMLHttpRequest(); 阅读详情

受浏览器的同源策略限制,JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范,这个规范试着从根本上解决安全的跨域资源共享问题。在此之前,解决此类问题的途径往往是服务器代理、JSONP等,治标不治本。目前基本所有浏览器都已经支持该规范。

一个域是由schema、host、port三者共同组成,与路径无关。所谓跨域,是指在http://example-foo.com/域上通过XMLHttpRequest对象调用http://example-bar.com/域上的资源。CORS约定服务器端和浏览器在HTTP协议之上,通过一些额外HTTP头部信息,进行跨域资源共享的协商。服务器端和浏览器都必需遵循规范中的要求。

CORS把HTTP请求分成两类,不同类别按不同的策略进行跨域资源共享协商。

1. 简单跨域请求。
当HTTP请求出现以下两种情况时,浏览器认为是简单跨域请求:

1). 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。
2). 请求中没有自定义HTTP头部。

对于简单跨域请求,浏览器要做的就是在HTTP请求中添加Origin Header,将JavaScript脚本所在域填充进去,向其他域的服务器请求资源。服务器端收到一个简单跨域请求后,根据资源权限配置,在响应头中添加Access-Control-Allow-Origin Header。浏览器收到响应后,查看Access-Control-Allow-Origin Header,如果当前域已经得到授权,则将结果返回给JavaScript。否则浏览器忽略此次响应。

2. 带预检(Preflighted)的跨域请求。
当HTTP请求出现以下两种情况时,浏览器认为是带预检(Preflighted)的跨域请求:

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 请求中出现自定义HTTP头部。

带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求,检测服务器端是否支持真实请求进行跨域资源访问,真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述,此外与简单跨域请求一样,浏览器也会添加Origin Header。服务器端接到预检请求后,根据资源权限配置,在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header,分别表示允许跨域资源请求的域、请求方法和请求头。此外,服务器端还可以加入Access-Control-Max-Age Header,允许浏览器在指定时间内,无需再发送预检请求进行协商,直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。

XMLHttpRequest支持通过withCredentials属性实现在跨域请求携带身份信息(Credential,例如Cookie或者HTTP认证信息)。浏览器将携带Cookie Header的请求发送到服务器端后,如果服务器没有响应Access-Control-Allow-Credentials Header,那么浏览器会忽略掉这次响应。

这里讨论的HTTP请求是指由Ajax XMLHttpRequest对象发起的,所有的CORS HTTP请求头都可由浏览器填充,无需在XMLHttpRequest对象中设置。以下是CORS协议规定的HTTP头,用来进行浏览器发起跨域资源请求时进行协商:
1. Origin。HTTP请求头,任何涉及CORS的请求都必需携带。
2. Access-Control-Request-Method。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的方法。
3. Access-Control-Request-Headers。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的自定义Header列表。
4. Access-Control-Allow-Origin。HTTP响应头,指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源,但是在响应一个携带身份信息(Credential)的HTTP请求时,Access-Control-Allow-Origin必需指定具体的域,不能用通配符。
5. Access-Control-Allow-Methods。HTTP响应头,指定服务器允许进行跨域资源访问的请求方法列表,一般用在响应预检请求上。
6. Access-Control-Allow-Headers。HTTP响应头,指定服务器允许进行跨域资源访问的请求头列表,一般用在响应预检请求上。
7. Access-Control-Max-Age。HTTP响应头,用在响应预检请求上,表示本次预检响应的有效时间。在此时间内,浏览器都可以根据此次协商结果决定是否有必要直接发送真实请求,而无需再次发送预检请求。

8. Access-Control-Allow-Credentials。HTTP响应头,凡是浏览器请求中携带了身份信息,而响应头中没有返回Access-Control-Allow-Credentials: true的,浏览器都会忽略此次响应。

总结:只要是带自定义header的跨域请求,在发送真实请求前都会先发送OPTIONS请求,浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。所以复杂请求肯定会两次请求服务端。

js 端的ajax请求:

 $.ajax({
        url: "http://test.com",
        dataType: 'json',
        type: 'GET',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Test", "testheadervalue");
        },
        async: false,
        cache: false,
        //contentType: 'application/x-www-form-urlencoded',
        success: function (sResponse) {
        }
    });

服务端的action

 //允许跨域访问
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Test");



js 使用ajax设置和获取自定义header信息的方法小结 主要介绍了js 使用ajax设置和获取自定义header信息的方法,结合实例形式总结分析了js 使用ajax自定义设置和获取header响应信息相关操作技巧与使用注意事项,需要的朋友可以参考下 立即下载

相关推荐

Jquery中巧用Ajax的beforeSend方法

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...... }); 防止重复数据 在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做

设置header,实现跨域访问

受浏览器的同源策略限制,JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范,这个规范试着从根本上解决安全的跨域资源共享问题。在此之前,解决此类问题的途径往往是服务器代理、JSONP等,治标不治本。目前基本所有浏览器都已经支持该规范。 一个域是由schema、host、...

zyb2010yaonuli的博客 7518

东方财富网API接口逆向分析:手把手教你破解那个带jQuery回调的股票数据接口

本文详细解析了东方财富网股票数据API接口的逆向工程实战技巧,重点介绍了JSONP接口的核心机制、参数解析及数据处理方法。通过Python代码示例演示了如何构造请求、处理分页数据及应对反爬策略,帮助开发者高效获取股票数据。文章还提供了完整的爬虫实现案例和常见问题排查指南。

weixin_30790841的博客 715

【JS】获取 Headers 头部信息

获取 Headers 头部信息,以及headers各实例方法的使用。

qq_45677671的博客 1万+

openEuler 20.03 LTS面向RK3399移植系列(3)—openEuler 20.03 LTS面向Firefly RK3399的第一个版本(Linux kernel 4.4)

任务动机:完成openEuler面向RK3399开发板的移植。 任务描述:按照固件烧写准备,固件获取,固件打包和烧写的步骤实现openEuler面向RK3399开发板的移植,整理过程和相关命令记录到文档。 1. 制作openEuler的rootfs.img 1.1 开发环境 树莓派--openEuler系统 openEuler 20.03 LTS 的内测版本镜像,下载。 1.2 具体操作 1.2.1 ssh远程连接树莓派 确定树莓派IP ssh连接 1.2.2 制作rootfs.img

火种源码的机器人技术专栏 2369

交换机基本介绍(分类、性能指标、硬件构成及工作方式)

一、交换机的分类与性能指标 1.1交换机的分类 按照网络构成方式来分的话,交换机分为三类:接入层交换机、汇聚层交换机和核心层交换机。 按照OSI模型来划分的话,分为:二层交换机、三层交换机和四层交换机 还有一种按照硬件形态来划分,可以分成两类:盒式交换机和机框式交换机。 盒式交换机是一种有固定端口数,有时也会带有少量扩展槽的交换机。机架式交换机是一种插槽式的交换机,这种交换机扩展性较好,可支持不同的网络类型,可支持更大端口密度的网络。一般在数据中心的接入层都会采用盒式交换机,盒式...

monologuezjp的博客 4万+

前后端如何解决跨域问题

解决跨域问题什么情况下会跨域前端解决跨域后端解决跨域 什么情况下会跨域 同源策略 同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。 参数原因: 由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略,浏览器很容易受到 XSS、 CSFR 等攻击。 跨域 跨域就是

卡洛背心的博客 1749

告别过热焦虑:用Ansys Icepak给你的电子设备做个“水冷体检”(附冷板案例全流程)

本文详细介绍了如何利用Ansys Icepak进行电子设备水冷系统的热仿真分析,帮助工程师解决设备过热问题。通过冷板案例全流程演示,展示了从几何处理、材料设定到求解器设置和后处理的关键步骤,提升散热设计效率与准确性。

weixin_29299807的博客 441

JS 设置header,实现跨域访问

直接讲跨域处理: CORS把HTTP请求分成两类,不同类别按不同的策略进行跨域资源共享协商。 1. 简单跨域请求。 当HTTP请求出现以下两种情况时,浏览器认为是简单跨域请求: 1). 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。 2). 请求中没有自定义HTTP头部。 对于简单跨域请求,浏览器要做的就是

b0303的博客 4100

8.19华为OD机试真题 新系统 - 基站低能耗时段统计 (Java/Py/C/C++/Js/Go)

8.19华为OD机试真题 新系统 - 基站低能耗时段统计 (Java/Py/C/C++/Js/Go)

算法大师! 1147

Claude Code 100个真实案例 - 用AI设计Arduino PCB电路板(硬件小白也能画板)

本案例展示如何使用 Claude Code 配合 KiCad 的 Python 脚本接口,从零设计一块 Arduino 传感器扩展板 PCB。从原理图符号创建、网表生成到 PCB 布局布线,全程自动化完成,最终输出可直接发给工厂打样的 Gerber 文件。

yueyeguzhuo的专栏 438

jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header

  跨域有多种方式,现在的情况看来还是CORS更适合一些,有很多优点,比如浏览器正式支持、支持post、可以控制跨域访问的网站等。   我们来看看node如何实现cors方式的跨域。在网上找到了一些代码,考过来之后运行报错,可能这个是在express里面的写法吧,那么原生的写法是什么样子的呢?又找了半天,并且经过测试得到了原生的写法: express的写法: ---app.js...

jyk 金色海洋工作室 ASP.NET经验总结 1964

利用人工神经网络在Abaqus中实现本构模型的网格粗化计算框架:详细指南与实践

在这篇文章中,我们详细介绍了如何在Abaqus中实现基于人工神经网络(ANN)的本构模型以进行网格粗化的计算框架。我们通过两个主要模块——数据生成器模块和ANN训练模块,实现了这一计算框架,并将训练好的ANN集成到Abaqus的用户材料子程序(UMAT)中,创建了一个基于ANN的本构模型。我希望这篇文章能帮助到那些希望在Abaqus中实现基于ANN的本构模型的读者,同时,我也非常欢迎大家提出宝贵的意见和建议,让我们共同进步。

qq_38334677的博客 1715

Ajax实现跨域访问的两种方法

调程序时遇到“已拦截跨源请求:同源策略禁止读取位于……的远程资源”,这是因为通过ajax调用其他域的接口会有跨域问题。 解决方法如下: 方法一:服务器端(PHP)设置header头,实现跨域访问 示例: // PHP <?php header('Access-Control-Allow-Origin:*'); $name = $_POST['username'...

weixin_30470643的博客 203

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

通过CORS配置实现JS跨域访问

两个方法 一、配置Filter,每个请求都拦截,设置Http Header Web.xml添加: &lt;filter&gt; &lt;filter-name&gt;cros&lt;/filter-name&gt; &lt;filter-class&gt;cn.ifengkou.test.filter.CORSFilter&lt;/filter-class&gt; ...

北极悠蓝的技术博客 457

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

通过设置P3P头来实现跨域访问COOKIE

实际工作中,类似这样的要求很多,比如说,我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是PASSPORT的功能。我只写一个大概,为了测试的方便,先编辑hosts文件,加入测试域名(C:\WINDOWS\system32\drivers\etc\hosts)127.0.0.1www.a.com127.0.0.1www.b.com首先:创建...

weixin_30325793的博客 92

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

使用内网穿透单条通道成功实现网页前后端的访问

利用内网穿透的免费隧道,实现公网访问自己网站的前后端。

Damaomihenwuqing的博客 720

VUE单点登陆传cookie

Cookie跨域单点登录 为了快速、简单的实现这一功能,首先想到就是通过JS操作Cookie并让两个不同域的cookie能够相互访问,这样就可达到了上述的效果,具体实现过程大致可分以下两个步骤: 1、在A系统下成功登录后,利用JS动态创建一个隐藏的iframe,通过iframe的src属性将A域下的cookie值作为 get参数重定向到B系统下b.aspx页面上;...

weixin_33854644的博客 560

JS中的跨域问题

原文链接:https://www.cnblogs.com/yongshaoye/p/7423881.html 一、什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:...

Mr.小强的博客 316

vue使用axios拦截器在header里添加token+设置跨域访问

在vue cli4种使用axios拦截器在header里添加token+设置跨域访问 没啥好说的,先安装 首先安装axios cnpm install --save axios 引入axios import axios from 'axios' Vue.prototype.$http = axios; 到此axios就在项目中安装完成了 请求方法: post方法: this.$http.post('/Api/test', { phone:this.use

weixin_44463070的博客 8229

2.1.5Nginx跨域访问:add_header

文章目录Nginx跨域访问跨域访问Nginx跨域操作:添加头:add_header测试准备开始测试 Nginx跨域访问 跨域访问 浏览器同时访问www.a.com和www.b.com,从安全角度讲是禁止这样的。 为什么浏览器禁止跨域访问 不安全,容易出现CSRF攻击! CSRF攻击就是跨站是攻击。 当客户访问网站A的时候,网站A返回给客户cookie,token等信息;当客户访问黑客控制的网站B的时候,网站B返回的不安全信息,会控制客户的浏览器访问网站A,并发送恶意请求,就形成跨站访问。 所以,一般

紫月7575的博客 2225

js跨域访问,No ‘Access-Control-Allow-Origin‘ header is present on

js跨域访问,No ‘Access-Control-Allow-Origin‘ header is present on 在本地用ajax跨域访问请求时报错: XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' header is present on

qilaizeng的博客 1万+
上一篇: Previous operation has not finished; run 'cleanup' if it was interrupted
下一篇: ASP.NET MVC模板
Waldenz
博客等级 码龄17年 219粉丝 229原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值