您的当前位置:首页正文

ajax跨域问题完美解决方法

2023-11-30 来源:91汽车资讯网
这次给大家带来ajax跨域问题完美解决方法,ajax跨域问题解决的注意事项有哪些,下面就是实战案例,一起来看一下。

今天来记录一下关于ajax跨域的一些问题。以备不时之需。

跨域

同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。

解决方式

通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发。二者各有利弊,具体要使用哪种方式还需要具体的分析。

  1. 服务器设置响应头

  2. 服务器代理

  3. 客户端采用脚本回调机制。

方式一

Access-Control-Allow-Origin 关键字只有在服务器端进行设置才 会生效。也就是说即使再客户端使用

xmlhttprequest.setHeaderREquest('xx','xx');

也不会有什么效果。

正常ajax请求

下面来模拟一下ajax非跨域请求的案例实现。

test1.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><p id="content"></p><script> var xhr = new XMLHttpRequest(); var url = 'http://localhost/learn/ajax/test1.php'; function crossDomainRequest() { document.getElementById('content').innerHTML = "<font color='red'>loading...</font>"; // 延迟执行 setTimeout(function () { if (xhr) { xhr.open('GEt', url, true); xhr.onreadystatechange = handle_response; xhr.send(null); } else { document.getElementById('content').innerText = "不能创建XMLHttpRequest对象"; } }, 3000); } function handle_response() { var container = document.getElementById('content'); if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { container.innerHTML = xhr.responseText; } else { container.innerText = '不能跨域请求'; } } }</script></body></html>

同级目录下的test1.PHP内容如下:

<?phpecho "It Works.";?>

正常ajax请求

跨域请求

刚才是HTML文件和php文件都在Apache的容器下,所以没有出现跨域的情形,现在把HTML文件放到桌面上,这样再次请求PHP数据的话,就营造了这样一个“跨域请求”了。

注意看浏览器的地址栏信息

再次进行访问,发现会出现下面的错误信息。

跨域出现了问题

针对这种情况,比较常见的一个操作就是设置Access-Control-Allow-Origin。

格式: Access-Control-Allow-Origin: domain.com/xx/yy.*

如果知道客户端的域名或者请求的固定路径,则最好是不使用通配符的方式,来进一步保证安全性。如果不确定,那就是用*通配符好了。

后端开发语言为PHP的时候可以再文件开始处这么设置:

header("Access-Control-Allow-Origin: *");

如果是ASPX页面的话,要这么设置(Java与之类似):

Response.AddHeader("Access-Control-Allow-Origin", "*");

这时,再次来访问一下刚才的路径。

服务器端跨域设置

服务器代理模式

这种方式应该算是比较常用的,而且被广泛采纳的一个方式了。说代理有点太过于书面化了,其实就是传话儿的。来举个小例子:

小明喜欢三班一个叫小红的女孩儿,但是不好意思去要人家的QQ,微信号。然后就托和自己班的女生–小兰。来帮自己去要。所以小兰就相当于一个代理。帮助小明获取原本不能直接获取的小红的联系方式。

下面来举个例子说明这个问题。

直接的跨域请求

修改一下刚才的URL即可,让ajax直接去请求其他网站的数据。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><p id="content"></p><script> var xhr = new XMLHttpRequest();// var url = 'http://localhost/learn/ajax/test1.php'; var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92'; function crossDomainRequest() { document.getElementById('content').innerHTML = "<font color='red'>loading...</font>"; // 延迟执行 setTimeout(function () { if (xhr) { xhr.open('GEt', url, true); xhr.onreadystatechange = handle_response; xhr.send(null); } else { document.getElementById('content').innerText = "不能创建XMLHttpRequest对象"; } }, 3000); } function handle_response() { var container = document.getElementById('content'); if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { container.innerHTML = xhr.responseText; } else { container.innerText = '不能跨域请求'; } } }</script></body></html>

结果如下:

代理模式下直接跨域会失败

启用代理模式

刚才的HTML页面,咱们还是用自己的接口:

url = 'http://localhost/learn/ajax/test1.php';

具体如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><p id="content"></p><script> var xhr = new XMLHttpRequest(); var url = 'http://localhost/learn/ajax/test1.php';// var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92'; function crossDomainRequest() { document.getElementById('content').innerHTML = "<font color='red'>loading...</font>"; // 延迟执行 setTimeout(function () { if (xhr) { xhr.open('GEt', url, true); xhr.onreadystatechange = handle_response; xhr.send(null); } else { document.getElementById('content').innerText = "不能创建XMLHttpRequest对象"; } }, 3000); } function handle_response() { var container = document.getElementById('content'); if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { container.innerHTML = xhr.responseText; } else { container.innerText = '不能跨域请求'; } } }</script></body></html>

然后对应的test1.php应该帮助我们实现数据请求这个过程,把“小红的联系方式”要到手,并返回给“小明”。

<?php$url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello%20world.';$result = file_get_contents($url);echo $result;?>

下面看下代码执行的结果。

代理模式下的跨域实现

jsonp方式

JSONP(JSON with Padding) 灵感其实源于在HTML页面中script标签内容的加载,对于script的src属性对应的内容,浏览器总是会对其进行加载。于是:

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。

实现的思路就是:

在服务器端组装出客户端预置好的json数据,通过回调的方式传回给客户端。

原生实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script></head><body><input type="text" name="talk" id="talk"><input type="button" value="Test" id="btn"><p id="content"></p><script type="text/javascript">function jsonpcallback(result) { for(var i in result) { alert(i+":"+result[i]); } } var JSONP = document.createElement("script"); JSONP.type='text/javascript'; JSONP.src='http://localhost/learn/ajax/test1.php?callback=jsonpcallback'; document.getElementsByTagName('head')[0].appendChild(JSONP);</script></body></html>

服务器端test1.php内容如下:

<?php$arr = [1,2,3,4,5,6];$result = json_encode($arr);echo "jsonpcallback(".$result.")";?>

需要注意的是最后组装的返回值内容。

来看下最终的代码执行效果。

JSONP原生跨域实现

JQuery方式实现

采用原生的JavaScript需要处理的事情还是蛮多的,下面为了简化操作,决定采用jQuery来代替一下。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script></head><body><input type="text" name="talk" id="talk"><input type="button" value="Test" id="btn"><p id="content"></p><script type="text/javascript"> function later_action(msg) { var element = $("<p><font color='green'>"+msg+"</font><br /></p>"); $("#content").append(element); } $("#btn").click(function(){ // alert($("#talk").val()); $.ajax({ url: 'http://localhost/learn/ajax/test1.php', method: 'post', dataType: 'jsonp', data: {"talk": $("#talk").val()}, jsonp: 'callback', success: function(callback){ console.log(callback.content); later_action(callback.content); }, error: function(err){ console.log(JSON.stringify(err)); }, }); });</script></body></html>

相应的,test1.php为了配合客户端聊天的需求,也稍微做了点改变。

<?php$requestparam = isset($_GET['callback'])?$_GET['callback']:'callback';// 青云志聊天机器人接口: http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello// 接收来自客户端的请求内容$talk = $_REQUEST['talk'];$result = file_get_contents("http://api.qingyunke.com/api.php?key=free&appid=0&msg=$talk");// 拼接一些字符串echo $requestparam . "($result)";?>

最后来查看一下跨域的效果吧。

JSONP 跨域实现聊天应用

总结

至此,关于简单的ajax跨域问题,就算是解决的差不多了。对我个人而言,对于这三种方式有一点点自己的看法。

  1. 服务器设置Access-Control-Allow-Origin的方式适合信用度高的小型应用或者个人应用。

  2. 代理模式则比较适合大型应用的处理。但是需要一个统一的规范,这样管理和维护起来都会比较方便。

  3. JSONP方式感觉还是比较鸡肋的(有可能是我经验还不足,没认识到这个方式的优点吧(⊙﹏⊙)b)。自己玩玩知道有这么个东西好了。维护起来实在是优点麻烦。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

详细解析JS中Ajax的使用技巧

JQuery调用Ajax加载图片

小编还为您整理了以下内容,可能对您也有帮助:

纯前端 html 中 ajax 如何处理跨域问题?

在纯前端 HTML 中,ajax 请求跨域问题可以通过以下方式解决:

1. JSONP 跨域:JSONP 是一种利用 script 标签跨域访问资源的方法。它的基本思想是,网页通过添加一个 script 标签来调用远程服务器上的脚本,该脚本返回的数据会被当作 JavaScript 代码执行。由于 script 标签不受同源策略,所以可以跨域访问资源。但是 JSONP 只支持 GET 请求。

2. CORS 跨域:CORS 是一种标准的跨域解决方案。它通过在服务端设置响应头来允许浏览器跨域访问资源。CORS 支持所有 HTTP 方法,包括 GET、POST、PUT、DELETE 等。

3. document.domain + iframe 跨域:这种方法是通过设置 document.domain 属性来实现的。当两个页面的 domain 相同时,它们之间就可以直接进行访问。但是如果 domain 不同,就需要通过 iframe 嵌套来实现跨域访问。

express如何解决ajax跨域访问session失效问题详解



前言

最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法。


解决方法

1、客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,只要使用的session都得加这句)

$('#login').click(function () {
$.ajax({
url: 'http://localhost:3000/users/yzm',//服务端路由地址
type: 'get',
xhrFields:{withCredentials:true},
dataType: 'json',
success:function(data){
$('#yzm_img').html(data)
},
error:function(){
alert('error');
}
});
});
$('#form_login').submit(function (e) {/!*登录*!/
e.preventDefault();/!*阻止表单默认事件,页面全局刷新*!/
var data=$('#form_login').serialize();/!*将表单里的数据包装起来*!/
$.ajax({
url : 'http://localhost:3000/users/login',
type : "post",
data : data,
xhrFields:{withCredentials:true},
dataType:'json',
success:function(msg) {
alert("这是返回的数据"+msg);
},
error:function(err){
alert("这是失败的信息"+err);
}
});
});
通过设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。


2、服务器端修改app.js文件


相应的,对于客户端的参数,服务器端也需要进行设置。


对应客户端的 xhrFields.withCredentials: true 参数,服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。通过对 Credentials 参数的设置,就可以保持跨域 Ajax 时的 Cookie。

var express = require('express');
var session = require('express-session');/*引入会话变量*/
var app = express();
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:63342");//前端域名
res.header("Access-Control-Allow-Credentials",'true');
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
特别注意:服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 '*' ,必须为自己客户端项目所在地址。


3、服务器中使用session

router.get('/yzm', function(req, res, next) {
req.session.yzm='abcd';
}
router.post('/login', function(req, res, next) {
console.log(req.session.yzm);
}
总结

express如何解决ajax跨域访问session失效问题详解



前言

最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法。


解决方法

1、客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,只要使用的session都得加这句)

$('#login').click(function () {
$.ajax({
url: 'http://localhost:3000/users/yzm',//服务端路由地址
type: 'get',
xhrFields:{withCredentials:true},
dataType: 'json',
success:function(data){
$('#yzm_img').html(data)
},
error:function(){
alert('error');
}
});
});
$('#form_login').submit(function (e) {/!*登录*!/
e.preventDefault();/!*阻止表单默认事件,页面全局刷新*!/
var data=$('#form_login').serialize();/!*将表单里的数据包装起来*!/
$.ajax({
url : 'http://localhost:3000/users/login',
type : "post",
data : data,
xhrFields:{withCredentials:true},
dataType:'json',
success:function(msg) {
alert("这是返回的数据"+msg);
},
error:function(err){
alert("这是失败的信息"+err);
}
});
});
通过设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。


2、服务器端修改app.js文件


相应的,对于客户端的参数,服务器端也需要进行设置。


对应客户端的 xhrFields.withCredentials: true 参数,服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。通过对 Credentials 参数的设置,就可以保持跨域 Ajax 时的 Cookie。

var express = require('express');
var session = require('express-session');/*引入会话变量*/
var app = express();
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:63342");//前端域名
res.header("Access-Control-Allow-Credentials",'true');
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
特别注意:服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 '*' ,必须为自己客户端项目所在地址。


3、服务器中使用session

router.get('/yzm', function(req, res, next) {
req.session.yzm='abcd';
}
router.post('/login', function(req, res, next) {
console.log(req.session.yzm);
}
总结

ajax跨域问题(python版本)

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。即JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。

注意:localhost和127.0.0.1也属于跨域。

如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.

修改Django中的views.py文件修改views.py中对应API的实现函数,给返回值加上响应头Access-Control-Allow-Origin,允许其他域通过Ajax请求数据:

满足以下两个条件的请求。

(1) 请求方法是以下三种方法之一:

(2) HTTP的头信息不超出以下几种字段:

非简单请求就是复杂请求。

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

预检请求为OPTIONS请求,用于向服务器请求权限信息的。

预检请求被成功响应后,才会发出真实请求,携带真实数据。

JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

JSONP的实现步骤大致如下(参考了来源中的文章)

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

JSONP使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。

前面讲了JSONP的实现原理,现在我们可以自己写JS来实现JSONP功能。

一般情况下,我们希望这个script标签能够动态的调用,而不是像固定在html里面所以没等页面显示就执行了,很不灵活。

我们可以通过页面的触发事件操作后,通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务。实例如下:

为了更加灵活,上述我们将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调。

如上,jQuery框架也当然支持JSONP,可以使用 $.getJSON(url,[data],[callback]) 方法。

与js实现的方式相比,我们并不要自己生成一个script标签,客户端也并不需要自己定义一个回调函数.

上述这种方法,很方便,不需要我们自己定义回调函数和指定回调函数名,但是,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?

我们可以使用$.ajax方法来实现。如下例:

在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名,server端接受callback键对应值后就可以在其中填充数据打包返回。

但是,jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。

如此,我们的跨域处理即完成,支持所有的请求。

跨域问题怎么解决

跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的*,要求当前页面和服务端必须同源,也就是协议、域名和端口号必须一致。
JSONP方式解决跨域:jsonp的原理就是利用了script标签不受浏览器同源策略的*,然后和后端一起配合来解决跨域问题的。具体的实现就是在客户端创建一个script标签,然后把请求后端的接口拼接一个回调函数名称作为参数传给后端,并且赋值给script标签的src属性,然后把script标签添加到body中,当后端接收到客户端的请求时,会解析得到回调函数名称,然后把数据和回调函数名称拼接成函数调用的形式返回,客户端解析后会调用定义好的回调函数,然后在回调函数中就可以获取到后端返回的数据了。
CORS方式解决跨域:cors是跨域资源共享,是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),使得浏览器允许这些origin访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。
搭建Node代理服务器解决跨域:因为同源策略是浏览器*的,所以服务端请求服务器是不受浏览器同源策略的*的,因此我们可以搭建一个自己的node服务器来代理访问服务器。大概的流程就是:我们在客户端请求自己的node代理服务器,然后在node代理服务器中转发客户端的请求访问服务器,服务器处理请求后给代理服务器响应数据,然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题,所以需要在代理服务器中设置CORS。
Nginx反向代理解决跨域:nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的*实现的。客户端请求nginx服务器,在nginx.conf配置文件中配置server监听客户端的请求,然后把location匹配的路径代理到真实的服务器,服务器处理请求后返回数据,nginx再把数据给客户端返回。
postMessage方式解决跨域:window.postMessage方法可以安全地实现跨源通信,此方法一种受控机制来规避此*,只要正确的使用,这种方法就很安全。主要的用途是实现多窗口,多文档之间通信:页面和其打开的新窗口的数据传递,多窗口之间消息传递,页面与嵌套的iframe消息传递。
Websocket方式解决跨域:使用Websocket也可以解决跨域问题,因为WebSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信,WebSocket规范定义了一个在Web浏览器和服务器之间建立“套接字”连接的API。简单来说:客户端和服务器之间存在持久连接,双方可以随时开始发送数据。

跨域问题怎么解决

跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的*,要求当前页面和服务端必须同源,也就是协议、域名和端口号必须一致。
JSONP方式解决跨域:jsonp的原理就是利用了script标签不受浏览器同源策略的*,然后和后端一起配合来解决跨域问题的。具体的实现就是在客户端创建一个script标签,然后把请求后端的接口拼接一个回调函数名称作为参数传给后端,并且赋值给script标签的src属性,然后把script标签添加到body中,当后端接收到客户端的请求时,会解析得到回调函数名称,然后把数据和回调函数名称拼接成函数调用的形式返回,客户端解析后会调用定义好的回调函数,然后在回调函数中就可以获取到后端返回的数据了。
CORS方式解决跨域:cors是跨域资源共享,是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),使得浏览器允许这些origin访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。
搭建Node代理服务器解决跨域:因为同源策略是浏览器*的,所以服务端请求服务器是不受浏览器同源策略的*的,因此我们可以搭建一个自己的node服务器来代理访问服务器。大概的流程就是:我们在客户端请求自己的node代理服务器,然后在node代理服务器中转发客户端的请求访问服务器,服务器处理请求后给代理服务器响应数据,然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题,所以需要在代理服务器中设置CORS。
Nginx反向代理解决跨域:nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的*实现的。客户端请求nginx服务器,在nginx.conf配置文件中配置server监听客户端的请求,然后把location匹配的路径代理到真实的服务器,服务器处理请求后返回数据,nginx再把数据给客户端返回。
postMessage方式解决跨域:window.postMessage方法可以安全地实现跨源通信,此方法一种受控机制来规避此*,只要正确的使用,这种方法就很安全。主要的用途是实现多窗口,多文档之间通信:页面和其打开的新窗口的数据传递,多窗口之间消息传递,页面与嵌套的iframe消息传递。
Websocket方式解决跨域:使用Websocket也可以解决跨域问题,因为WebSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信,WebSocket规范定义了一个在Web浏览器和服务器之间建立“套接字”连接的API。简单来说:客户端和服务器之间存在持久连接,双方可以随时开始发送数据。

如何解决ajax跨域问题

解决的办法,大概有如下几种:
1. 使用中间层过渡的方式(可以理解为“代理”):
中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。拿asp.net做一个例子,如果需要对不同域的某一个asp.net进行通讯,现在客户端的xmlhttprequest先query本域的一个asp.net ,然后由本域的这个asp.net去和不同域的asp.net进行通讯,然后由本域的asp.net响应输出(response);思路大概就是这样的,相信读者已经很清楚的理解了。
2. 使用<script>标签
这个方法是利用<script>标签中的src来query一个aspx获得response,因为<script>标签的src属性不存在跨域的问题。
举个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax跨域问题</title>
<script type="text/javascript" src="" id="getAspx">
</script>
<script type="text/javascript">
function get(url) {
var obj = document.getElementById("getAspx");
obj.src = url;
(obj.readStatus == 200)
{
alert(responseVal);//如果成功,会弹出Dylan
}
}
function query() {
get(getDemo.aspx);
}
</script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>

如何解决ajax跨域问题

解决的办法,大概有如下几种:
1. 使用中间层过渡的方式(可以理解为“代理”):
中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。拿asp.net做一个例子,如果需要对不同域的某一个asp.net进行通讯,现在客户端的xmlhttprequest先query本域的一个asp.net ,然后由本域的这个asp.net去和不同域的asp.net进行通讯,然后由本域的asp.net响应输出(response);思路大概就是这样的,相信读者已经很清楚的理解了。
2. 使用<script>标签
这个方法是利用<script>标签中的src来query一个aspx获得response,因为<script>标签的src属性不存在跨域的问题。
举个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax跨域问题</title>
<script type="text/javascript" src="" id="getAspx">
</script>
<script type="text/javascript">
function get(url) {
var obj = document.getElementById("getAspx");
obj.src = url;
(obj.readStatus == 200)
{
alert(responseVal);//如果成功,会弹出Dylan
}
}
function query() {
get(getDemo.aspx);
}
</script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>

Ajax 跨域问题及其解决方案

主流的前后端分离模式下,当前端调用后台接口时,由于是在非同一个域下的请求,从而会引发浏览器的自我安全保护机制,最终结果是接口成功请求并响应,但前端不能正常处理该返回数据

因此,当同时满足以下三个条件的情况下,就会出现跨域问题:

想要彻底解决跨域问题,只需要破坏以上三个条件的任一即可:

添加浏览器启动参数: chrome --disable-web-security ,但是极不推荐这种解决方式。

Jsonp,全称 JSON with Padding ,一种非官方的协议,而是一种约定;前端通过向后台发送 script 类型请求解决跨域,此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。

所以,后台也需要做相应的处理。以 Java 为例,添加如下配置即可:

综上, jsonp 请求存在以下几个弊端:

用 Nginx 或 Apache 来代理调用方的请求(客户端变更为相对路径请求,而非绝对路径),此时对于浏览器来说,由于请求是同源的,因此就不存在跨域问题。

以 Java 应用为例,添加如下全局配置:

如果只想针对某个类下的接口,或者是某个具体的接口配置允许跨域,只需要在相应的地方添加注解 @CrossOrigin 即可。

如果配置了 nginx 作为代理服务器,那么只需要为 nginx 添加支持跨域请求即可:

Q1:浏览器在执行跨域请求时,是先执行后判断,还是先判断后执行?
A1:都有可能,这需要根据所发送的请求是简单请求还是非简单请求来判断;如果是非简单请求,浏览器每次在执行真正的请求之前,还会先发送一个 options 请求方式的预检命令【 可设定缓存时长,取消每次请求都要预检,提高效率,参考上面的服务端配置】。关于两种请求的区分及定义,参考下图说明:

Q2:如果是允许带(被调用方) cookie 的跨域请求,此时服务端同样配置为 Access-Control-Allow-Origin 等于 * ,前端是否还可以请求成功?
A2:不可以,此时要将 Access-Control-Allow-Origin 指定为调用方具体的域【 可以先取得调用方的域再动态配置,这样就不存在多个域请求的*问题】,并且添加配置 Access-Control-Allow-Credentials 为 true 。

Ajax 跨域问题及其解决方案

主流的前后端分离模式下,当前端调用后台接口时,由于是在非同一个域下的请求,从而会引发浏览器的自我安全保护机制,最终结果是接口成功请求并响应,但前端不能正常处理该返回数据

因此,当同时满足以下三个条件的情况下,就会出现跨域问题:

想要彻底解决跨域问题,只需要破坏以上三个条件的任一即可:

添加浏览器启动参数: chrome --disable-web-security ,但是极不推荐这种解决方式。

Jsonp,全称 JSON with Padding ,一种非官方的协议,而是一种约定;前端通过向后台发送 script 类型请求解决跨域,此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。

所以,后台也需要做相应的处理。以 Java 为例,添加如下配置即可:

综上, jsonp 请求存在以下几个弊端:

用 Nginx 或 Apache 来代理调用方的请求(客户端变更为相对路径请求,而非绝对路径),此时对于浏览器来说,由于请求是同源的,因此就不存在跨域问题。

以 Java 应用为例,添加如下全局配置:

如果只想针对某个类下的接口,或者是某个具体的接口配置允许跨域,只需要在相应的地方添加注解 @CrossOrigin 即可。

如果配置了 nginx 作为代理服务器,那么只需要为 nginx 添加支持跨域请求即可:

Q1:浏览器在执行跨域请求时,是先执行后判断,还是先判断后执行?
A1:都有可能,这需要根据所发送的请求是简单请求还是非简单请求来判断;如果是非简单请求,浏览器每次在执行真正的请求之前,还会先发送一个 options 请求方式的预检命令【 可设定缓存时长,取消每次请求都要预检,提高效率,参考上面的服务端配置】。关于两种请求的区分及定义,参考下图说明:

Q2:如果是允许带(被调用方) cookie 的跨域请求,此时服务端同样配置为 Access-Control-Allow-Origin 等于 * ,前端是否还可以请求成功?
A2:不可以,此时要将 Access-Control-Allow-Origin 指定为调用方具体的域【 可以先取得调用方的域再动态配置,这样就不存在多个域请求的*问题】,并且添加配置 Access-Control-Allow-Credentials 为 true 。

ajax跨域请求处理及header自定义设置

最近做了一个应用管理系统,采用前后端分离方式开发,前端使用了layuiadmin框架,后端使用了 .net web api,在开发过程中,遇到了ajax跨域问题及header自定义设置,这是所有前后端分离开发都需要解决的问题,在此做一个记录。

在前端ajax请求时,我们在header中设置了自定义的头部信息,将token写入了头部,便于后端进行身份认证, 如:xhr.setRequestHeader("Authorization", access_token)。通过了ajax全局方法做了统一处理。

在设置了自定义header后,浏览器到后端请求将分为两步进行。

浏览器将先发送一个预请求OPTIONS到后端,这里后端需要对OPTIONS请求做出正确响应,可以直接返回200状态码,不用返回内容信息。

浏览器接收到OPTIONS正确响应后会自动执行发送get或post请求。可此时依旧没有请求到后端数据,F12查看控制台输出,会发现报错了。这就是接下来要处理的跨域问题。

跨域的处理主要是服务器端设置响应头,针对.net web api 可直接在web.config文件中的<system.webServer>节点中进行设置,如图:

Access-Control-Allow-Origin; //支持全域名访问,不安全,部署后需要固定为客户端网址

Access-Control-Allow-Methods; //支持的http 动作

Access-Control-Allow-Headers; //响应头 请按照自己需求添加

设置完成后,前端在chrome下调用api接口能正常相应,但在IE下依旧报错,如图:

最终发现,我们自定义设置了Authorization,在IE下,后端并没有给出相应的响应,原以为Access-Control-Allow-Headers设置为*,就能表示所有的响应头,但在IE下不行,需要将自己对应的需求以此设置。如图

设置完后,就可成功访问后端api。

关于Ajax如何实现跨域访问的问题介绍

这篇文章主要介绍了关于关于Ajax如何实现跨域访问的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢?

解决方案1.Jsonp

Jsonp解决跨域相对简单,服务器无需任何配置。具体实现如下:

$.ajax({

type: 'get',

url: 'http://xxx.com',

data: {},

dataType: 'jsonp',

success: function (data) {

},

error: function (data) {

mask.close();

toast('请求失败');

}

});2.CORS

CORS解决方案需要前端和服务端共同配置才能实现

前端

$.ajax({

url: 'http://xxx.com',

type: 'post',

xhrFields:{

withCredentials:true

},

data: {},

success: function(res){

},

error: function(){

alert('服务器发生错误!');

}

});服务端(在程序入口文件配置)

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

header('Access-Control-Allow-Credentials: true');

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

91汽车资讯网还为您提供以下相关内容希望对您有帮助:

Ajax 如何解决跨域的问题?

Ajax 解决跨域问题的方法有很多,其中一种方法是使用 JSONP。JSONP 是一种跨域数据交互协议,它的基本思想是,网页通过添加一个 script 标签来实现跨域请求。这个 script 标签的 src 属性指向一个需要访问的地址,该地址返回...

ajax跨域问题(python版本)

我们可以使用$.ajax方法来实现。如下例:在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名,server端接受callback键对应值后就可以在其中填充数据打包返回。但是,jsonp...

express如何解决ajax跨域访问session失效问题详解

解决方法1、客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,只要使用的session都得加这句) $('#login').click(function ...

如何解决ajax跨域问题

解决的办法,大概有如下几种:1. 使用中间层过渡的方式(可以理解为“代理”):中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言,由...

Ajax跨域请求如何使用

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:$(document).ready(function(){var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"+"?id=1&amp;callback=?';$.ajax({url:url,dataType:...

如何解决ajax跨域问题

解决ajax跨域问题 方法1:在服务器端直接设置header内容:Access-Control-Allow-Origin:或者 Access-Control-Allow-Origin:允许访问的url 这样就可以直接请求到任何网站或者允许访问的url php程序这样写:header('Access-Control-...

使用jquery的ajax的jsonp类型跨域请求数据、始终获取不到返回数据呢_百...

使用jquery的ajax的jsonp类型跨域请求数据、始终获取不到返回数据是设置错误造成的,解决方法为:1、创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js。2、如图分别编写json_ajax.html和json_ajax.php文件的...

ajax请求本地json文件出现跨域问题

1、在Firefox的地址栏输入“about:config”,回车 2、在过滤器(filter)中搜索“security.fileuri.strict_origin_policy”(第一次会出现安全协议,点击确认即可)3、双击security.fileuri.strict_origin_policy设置为false 4、...

跨域问题怎么解决

JSONP方式解决跨域:jsonp的原理就是利用了script标签不受浏览器同源策略的限制,然后和后端一起配合来解决跨域问题的。具体的实现就是在客户端创建一个script标签,然后把请求后端的接口拼接一个回调函数名称作为参数传给后端,...

什么叫ajax跨域访问

协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时,就涉及跨域了。我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。

Top