`
dcj3sjt126com
  • 浏览: 1871916 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

 
阅读更多

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。

此处手札 供后人参考~

1.第一步 服务端设置响应头

header('Access-Control-Allow-Origin:*');  //支持全域名访问,不安全,部署后需要固定限制为客户端网址

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作

header('Access-Control-Allow-Headers:x-requested-with,content-type');  //响应头 请按照自己需求添加。

2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求"   就是如果遇到 跨域并设置headers的请求,所有请求需要两步完成!

第一步:发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。(能看到这份手稿的人,本人不相信你后台处理不了一个options请求)

二步:服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了,但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why?因为你自定义的请求头在服务器响应中不存在!

查看console输出 会发现一个问题:

“Access-Control-Allow-Headers 列表中不存在请求标头 XXXXXX”【IE】,

request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】

这是因为 你的XXXX请求头 没有在服务器端被允许哦~

遇到这个问题 只有通过修改服务器端来完成,举例:需要设置 requesttype这么一个自定义头,那么 你需要在 服务端里面 将header('Access-Control-Allow-Headers:x-requested-with,content-type,requesttype');  同学们自行体会吧 这种语法就是根据“,”分割 自己需要设置什么头,必须要在 服务端请求的响应头里面设置好,不然客户端永远永远提交不上去!

至此  JavaScript/ajax  跨域+ 修改httpheader 任务完美实现。前端 后端完全分离 大道自成!前后期分离迎来旷古的潮流

 次处作为见证 2016年1月25日20:21:28

"人们都一直在抱怨 JavaScript同源策略限制了web前端的发展!然而是服务端做的不够细致!"

部分代码参考如下:代码只是提供了思想,具体步骤还要根据以上的文字 自行揣摩实现。以上内容看不懂 说明对于web一点也不了解,需要买本书看看喽~(本人个人经历成功实现。若有人遇到同样的问题可以 加群245961308)

客户端代码:

 

服务器端代码

 

 

 

 

-------------------

 

例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。

如果直接使用ajax访问,会有以下错误:

XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.

1、允许单个域名访问

指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:

header('Access-Control-Allow-Origin:http://client.runoob.com');

2、允许多个域名访问

指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
  
$allow_origin = array(  
    'http://client1.runoob.com',  
    'http://client2.runoob.com'  
);  
  
if(in_array($origin, $allow_origin)){  
    header('Access-Control-Allow-Origin:'.$origin);       
}

3、允许所有域名访问

允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:

header('Access-Control-Allow-Origin:*');
分享到:
评论

相关推荐

    利用JQuery jsonp实现Ajax跨域请求json数据

    通过在客户端设置`dataType: 'jsonp'`和`jsonp: 'callback'`,然后在服务器端根据请求的回调函数参数构建响应,我们可以实现Ajax跨域获取JSON数据。无论是在.Net的`.handler`还是WebService中,这一过程都是相似的,...

    Javascript跨域和Ajax跨域解决方案

    JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...

    demo跨域ajax_DEMO_ajax跨域_

    在前端JavaScript部分,使用Ajax发起跨域请求时,可以借助jQuery的$.ajax或$.getJSON等函数,设置`xhrFields`和`crossDomain`参数: ```javascript $.ajax({ url: 'http://api.example.com/data', type: 'GET', ...

    ajax处理跨域请求

    在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...

    jQuery.ajax 跨域请求webapi设置headers的解决方案

    客户端JavaScript代码中,使用jQuery的`$.ajax`进行跨域请求时,可以在`beforeSend`回调函数中设置请求的headers: ```javascript $("#btnSubmit").click(function () { var ticket = $.cookie("token"); var ...

    ajax跨域调用wcf实例

    3. **使用jQuery或原生JavaScript发起AJAX请求**:在客户端,我们可以使用jQuery的`$.ajax()`或原生的`XMLHttpRequest`对象发起跨域请求。确保指定`dataType`为`json`,`type`为`GET`或`POST`,以及目标URL。 ```...

    Ajax跨域访问解决方案

    此外,还可以设置其他响应头如`Access-Control-Allow-Methods`、`Access-Control-Allow-Headers`等,控制请求方法和请求头。 4. **代理服务器** 如果目标服务器不支持CORS,可以使用代理服务器。在服务器端,设置...

    Ajax跨域详解与代码

    - `ajaxclient1`:一个简单的Ajax客户端示例,可能使用JavaScript或jQuery实现,用于发起跨域请求。 - `ajaxserver1`:一个服务端示例,可能是Java应用,展示了如何配置CORS头。 - `nginx`:可能是一个Nginx配置文件...

    ajax跨域请求demo.zip

    这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...

    ajax跨域请求

    在这个示例中,可能包含两个示例文件,`AJAX1`和`AJAX2`,它们可能是JavaScript代码文件,分别展示了JSONP和CORS的跨域请求实现。通过学习这两个文件,你可以深入理解这两种跨域技术的工作原理,并将它们应用到实际...

    怎样实现Ajax 跨域访问

    利用`<img>`和`<script>`标签可以跨域加载资源的特性,通过动态创建这些标签并设置其`src`属性为请求地址,从而间接获取服务器上的数据。这种方式适用于只需要返回文本或图片等简单类型数据的场景。 #### 三、使用...

    解决ajax跨域问题

    这样,浏览器在发送AJAX请求前会先发送一个预检请求(OPTIONS),确认服务器允许跨域请求后,才会发起实际的请求。 3. 代理服务器 如果以上两种方法在某些情况下不可行,如服务器无法修改响应头或不支持JSONP,可以...

    Springboot解决ajax+自定义headers的跨域请求问题

    这导致了在处理跨域请求时的一些挑战,尤其是在使用AJAX和自定义headers时。Spring Boot作为流行的Java后端框架,提供了优雅的解决方案来处理这类问题。 首先,我们来理解什么是跨域。跨域是指一个域下的文档或脚本...

    ajax跨域上传文件.zip

    3. **设置请求头** 在发送Ajax请求前,我们需要配置`XMLHttpRequest`对象,特别是设置`Content-Type`和`withCredentials`属性: ```javascript xhr.setRequestHeader('Content-Type', 'multipart/form-data'); ...

    Ext.Ajax.request跨域

    要使用Ext.Ajax.request进行跨域,你需要在请求配置中添加`withCredentials`属性(表示是否携带cookies)以及`headers`字段。例如: ```javascript Ext.Ajax.request({ url: 'http://other-origin.com/api', ...

    JAVA的AJAX跨域访问

    然而,AJAX请求的一个常见问题就是跨域访问限制。浏览器出于安全考虑,实施了同源策略,这导致了来自不同域名、端口或协议的请求无法相互访问。本文将深入探讨在Java环境下,如何解决JSP中的AJAX跨域访问问题。 ###...

    Ajax跨域问题及解决方案(jsonp,cors)

    在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。 代码如下: html: <body> ...

    Ajax跨域访问(ASP.NET Web)

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提高用户体验。然而,由于浏览器的同源策略限制,Ajax请求通常只能向同一域名下的服务器发送,这就是所谓的“同源策略”...

    Ajax跨域问题详细解读

    然而,随着跨域安全策略的实施,Ajax请求并非总能畅通无阻,这就是所谓的Ajax跨域问题。本文将深入探讨Ajax跨域问题的原理、解决方案以及相关的HTTP头部设置。 1. 跨域限制的由来 浏览器出于安全性考虑,执行同源...

Global site tag (gtag.js) - Google Analytics