jquery跨域请求 jquery怎么解决跨域

编程之家2026-06-20810次浏览

大家好，关于jquery跨域请求很多朋友都还不太明白，今天小编就来为大家分享关于jquery怎么解决跨域的知识，希望对各位有所帮助！

使用jquery的jsonp如何发起跨域请求及其原理详解

前言

本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

先看下准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090

请求数据：请求数据的端口为8080

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

$(document).ready(function(){

$("#btn").click(function(){

$.ajax({

url:'',

type:'GET',

success: function(data){

$(text).val(data);

}

});

</script>

</head>

<body>

</body>

</html>

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了。

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用<img src="">标签来随意显示某个域上的图片一样。

比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

3、那么看下如何使用<script src="">来完成一个跨域请求：

当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

//回调函数

function showData(result){

var data= JSON.stringify(result);//json对象转成字符串

$("#text").val(data);

}

$(document).ready(function(){

$("#btn").click(function(){

//向头部输入一个脚本，该脚本发起一个跨域请求

$("head").append("<script src=''><\/script>");

});

</script>

</head>

<body>

</body>

</html>

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

//数据

List<Student> studentList= getStudentList();

JSONArray jsonArray= JSONArray.fromObject(studentList);

String result= jsonArray.toString();

//前端传过来的回调函数名称

String callback= request.getParameter("callback");

//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

result= callback+"("+ result+")";

response.getWriter().write(result);

}

结果：

4、再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

$(document).ready(function(){

$("#btn").click(function(){

$.ajax({

url:"",

type:"GET",

dataType:"jsonp",//指定服务器返回的数据类型

success: function(data){

var result= JSON.stringify(data);//json对象转成字符串

$("#text").val(result);

}

});

</script>

</head>

<body>

</body>

</html>

效果：

再看看如何指定特定的回调函数：第30行代码

回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。

然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

function showData(data){

console.info("调用showData");

var result= JSON.stringify(data);

$("#text").val(result);

}

$(document).ready(function(){

// window.showData= function(data){

// console.info("调用showData");

// var result= JSON.stringify(data);

//$("#text").val(result);

//}

$("#btn").click(function(){

$.ajax({

url:"",

type:"GET",

dataType:"jsonp",//指定服务器返回的数据类型

jsonpCallback:"showData",//指定回调函数名称

success: function(data){

console.info("调用success");

}

});

</script>

</head>

<body>

</body>

</html>

效果图：

再看看如何改变callback这个名称：第23行代码

指定callback这个名称后，后台也需要跟着更改。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

function showData(data){

console.info("调用showData");

var result= JSON.stringify(data);

$("#text").val(result);

}

$(document).ready(function(){

$("#btn").click(function(){

$.ajax({

url:"",

type:"GET",

dataType:"jsonp",//指定服务器返回的数据类型

jsonp:"theFunction",//指定参数名称

jsonpCallback:"showData",//指定回调函数名称

success: function(data){

console.info("调用success");

}

});

</script>

</head>

<body>

</body>

</html>

后台代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

//数据

List<Student> studentList= getStudentList();

JSONArray jsonArray= JSONArray.fromObject(studentList);

String result= jsonArray.toString();

//前端传过来的回调函数名称

String callback= request.getParameter("theFunction");

//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

result= callback+"("+ result+")";

response.getWriter().write(result);

}

效果图：

最后看看jsonp是否支持POST方式：ajax请求指定POST方式

可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

$(document).ready(function(){

$("#btn").click(function(){

$.ajax({

url:"",

type:"POST",//post请求方式

dataType:"jsonp",

jsonp:"callback",

success: function(data){

var result= JSON.stringify(data);

$("#text").val(result);

}

});

</script>

</head>

<body>

</body>

</html>

效果图：

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin”。

有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

response.setHeader("Access-Control-Allow-Origin","*");设置允许任何域名跨域访问

设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

//*表示允许任何域名跨域访问

response.setHeader("Access-Control-Allow-Origin","*");

//指定特定域名可以访问

response.setHeader("Access-Control-Allow-Origin","http:localhost:8080/");

//数据

List<Student> studentList= getStudentList();

JSONArray jsonArray= JSONArray.fromObject(studentList);

String result= jsonArray.toString();

//前端传过来的回调函数名称

String callback= request.getParameter("callback");

//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

result= callback+"("+ result+")";

response.getWriter().write(result);

}

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

好了，

在循环中jQuery 跨域获取 JSON 回调函数为什么最后才执行

在使用Jquery跨域获取JSON时出现一个非常奇怪的问题，一直解决不了： 1.首先用getJSON跨域获取JSON数据，回调函数执行也正常 2.然后把JSON中的某个以空格分隔的数据变成数组 3.对该数组执行循环，在循环中，用getJSON再跨域获取另一个JSON，然后执行一些动作以上执行到第三步时，在跨域获取另一个JSON处卡壳了，断点跟踪发现，此处回调函数不执行，一直执行到最后一次循环时，这个回调函数才执行，而且会执行多次，执行次数为循环次数，而且是把之前每次循环时传给他的值依次执行。也就是说，本应该是循环一次，执行一次getJSON，结果变成了循环结束，然后getJSON才用之前每次循环传给的值循环执行

跨域请求是什么

问题一：跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识跨域是指不同域名之间相互访问例如我的电脑上有2个服务器 192.168.0.11 192.168.0.12如果第一个服务器上的页面要访问第二个服务器就叫做跨域或者baidu要访问xxx也是不同域名也是跨域

HTML5里有个window.postMessage方法，支持跨域访问，详情可以参考

webhek/window-postmessage-api

如果你的程序在服务器上，也可以进行相应的操作来完成跨域访问

纯手打有问题欢迎咨询

问题二：什么叫做跨域访问，求大神解答如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容

如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题

Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题

一般都会用jsoncallback方法来解决

你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的

希望能帮助到你

问题三：什么是AJAX跨域请求假设你有两个站点a和b

在a中用ajax向b发送请求，这就是跨域请求了。

问题四：什么是跨域访问跨域访问就是你在一个域环境下阀访问另一个域的内容。

跨域访问前提是彼此相互信任，不然是没法访问的。

问题五：什么是JS跨域访问 ajax或者iframe指向的地址中，二级域名、端口、协议必须与主页面完全相同，否则就算跨域

比如

a.baidu访问b.baidu是跨域；

a.baidu:8080访问a.baidu:80是跨域；

a.baidu访问a.baidu是跨域

ajax跨域，两种办法：后端写个代理接口，让后端去抓数据；或者与对方合作，用jsonp等方式传送数据

iframe跨域问题有点多，必须要得到iframe内部页面的配合才可能通信，方法也比较多：

1，假写hash值通信，父子页面各自建立轮询去检测iframe中url的hash值，通过值来通信

2，利用HTML5的postMessage，不过注意这个也是异步的

3，利用IE6\7中对navigator的bug，我前同事发现的，在ie6/7中，父子页面使用的window.navigator是同一个东西，父页面改了，子页面也会跟着变；

4，iframe中嵌套一层与顶层页面同域的页面，比如a中套b，b中套c，其中a、c同域，b做出改变后通过url给c传值，c中操作top对象也就是a，由于同域，所以不会有问题

问题六：$跨域请求怎么解决 post请求进行跨域

angularjs内置封装了类ajax的网络服务$,所以实现了依赖外部插件来完成完整的前后端分离方案

$scope.main={

getData: function(){

$({

method:'POST',

url:'localhost:8000',

headers:{

'Content-Type':'application/x--form-urlencoded'

data:{

myUrl:'c.m.163/...0'

}

}).then(function success(result){

数据请求成功

console.log(result.data);

},function error(err){

数据请求失败

console.log(err);

});

}

};

注意：表面上是向$中传入了一个回调函数提供相应时调用，实际是返回了一个promise对象，angular1.2以上的版本对$进行了优化

优化后：

$scope.main={

getData: function(){

var myUrl='c.m.163/...0';

var url='localhost:8000';

var promise=$({

method:'POST',

url: url,

headers:{

'Content-Type':'text/plain'

......>>

问题七：xmlrequest跨域请求是什么意思跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style.标签加载外部样式表文件、通过 img标签加载外部图片、通过 script.标签加载外部脚本文件、通过 Webfont加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。

那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置 document.domain属性将它们认为是同源的。

问题八：什么是JS跨域请求？有几种方式可以实现通俗就是你自己的网站请求别人别人网站上的数据。跨域方法有好多后台可以跨域 script标签可以跨域 jsonp可以跨域多度娘

问题九：ajax跨域到底是什么意思？能否举个简单例子说明一下？ Ajax请求一个目标地址为非本域（协议、域名、端口任意一个不同）的web资源，并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时，就涉及跨域了。我们请求一个外部服务时，浏览器会基于安全问题拒绝授权访问。而script、script、iframe标签的src属性就不存在跨域的问题，所以Ajax跨域就是利用这一点以及js对JSON的支持，外部服务只要给Ajax的请求响应一段JS代码或JSON数据，就能被Ajax获取到。

比如jquery的getScript

$.getScript(pv.sohu/cityjson,function(){前面加上这个服务给响应的js代码为 returnCitySN={cid: 110000, cip: 124.xxx.22.xxx, ame:北京市}回调函数执行前，外部服务给响应的js代码已被加载到本地，所以可以直接使用。 console.log(cid:+ returnCitySN.cid); console.log(cip:+ returnCitySN.cip); console.log(ame:+ returnCitySName);});

问题十：html跨域请求怎么写？ JSONP

proxy代理cors

xdr

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

如果你还想了解更多这方面的信息，记得收藏关注本站。

圣洁化身索拉卡特效(圣洁化身索拉卡稀有吗)马斯克 openai，openai和马斯克的关系