解决跨域调用服务并设置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的请求,所有请求需要两步完成!
A 第一步:发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。(能看到这份手稿的人,本人不相信你后台处理不了一个options请求)
B 第二步:服务器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:*');
相关推荐
通过在客户端设置`dataType: 'jsonp'`和`jsonp: 'callback'`,然后在服务器端根据请求的回调函数参数构建响应,我们可以实现Ajax跨域获取JSON数据。无论是在.Net的`.handler`还是WebService中,这一过程都是相似的,...
JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...
在前端JavaScript部分,使用Ajax发起跨域请求时,可以借助jQuery的$.ajax或$.getJSON等函数,设置`xhrFields`和`crossDomain`参数: ```javascript $.ajax({ url: 'http://api.example.com/data', type: 'GET', ...
在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...
客户端JavaScript代码中,使用jQuery的`$.ajax`进行跨域请求时,可以在`beforeSend`回调函数中设置请求的headers: ```javascript $("#btnSubmit").click(function () { var ticket = $.cookie("token"); var ...
3. **使用jQuery或原生JavaScript发起AJAX请求**:在客户端,我们可以使用jQuery的`$.ajax()`或原生的`XMLHttpRequest`对象发起跨域请求。确保指定`dataType`为`json`,`type`为`GET`或`POST`,以及目标URL。 ```...
此外,还可以设置其他响应头如`Access-Control-Allow-Methods`、`Access-Control-Allow-Headers`等,控制请求方法和请求头。 4. **代理服务器** 如果目标服务器不支持CORS,可以使用代理服务器。在服务器端,设置...
- `ajaxclient1`:一个简单的Ajax客户端示例,可能使用JavaScript或jQuery实现,用于发起跨域请求。 - `ajaxserver1`:一个服务端示例,可能是Java应用,展示了如何配置CORS头。 - `nginx`:可能是一个Nginx配置文件...
这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...
在这个示例中,可能包含两个示例文件,`AJAX1`和`AJAX2`,它们可能是JavaScript代码文件,分别展示了JSONP和CORS的跨域请求实现。通过学习这两个文件,你可以深入理解这两种跨域技术的工作原理,并将它们应用到实际...
利用`<img>`和`<script>`标签可以跨域加载资源的特性,通过动态创建这些标签并设置其`src`属性为请求地址,从而间接获取服务器上的数据。这种方式适用于只需要返回文本或图片等简单类型数据的场景。 #### 三、使用...
这样,浏览器在发送AJAX请求前会先发送一个预检请求(OPTIONS),确认服务器允许跨域请求后,才会发起实际的请求。 3. 代理服务器 如果以上两种方法在某些情况下不可行,如服务器无法修改响应头或不支持JSONP,可以...
这导致了在处理跨域请求时的一些挑战,尤其是在使用AJAX和自定义headers时。Spring Boot作为流行的Java后端框架,提供了优雅的解决方案来处理这类问题。 首先,我们来理解什么是跨域。跨域是指一个域下的文档或脚本...
3. **设置请求头** 在发送Ajax请求前,我们需要配置`XMLHttpRequest`对象,特别是设置`Content-Type`和`withCredentials`属性: ```javascript xhr.setRequestHeader('Content-Type', 'multipart/form-data'); ...
要使用Ext.Ajax.request进行跨域,你需要在请求配置中添加`withCredentials`属性(表示是否携带cookies)以及`headers`字段。例如: ```javascript Ext.Ajax.request({ url: 'http://other-origin.com/api', ...
然而,AJAX请求的一个常见问题就是跨域访问限制。浏览器出于安全考虑,实施了同源策略,这导致了来自不同域名、端口或协议的请求无法相互访问。本文将深入探讨在Java环境下,如何解决JSP中的AJAX跨域访问问题。 ###...
在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。 代码如下: html: <body> ...
在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提高用户体验。然而,由于浏览器的同源策略限制,Ajax请求通常只能向同一域名下的服务器发送,这就是所谓的“同源策略”...
然而,随着跨域安全策略的实施,Ajax请求并非总能畅通无阻,这就是所谓的Ajax跨域问题。本文将深入探讨Ajax跨域问题的原理、解决方案以及相关的HTTP头部设置。 1. 跨域限制的由来 浏览器出于安全性考虑,执行同源...