Ajax跨域问题的两种解决方法

最新推荐文章于 2024-04-12 22:54:32 发布
转载 最新推荐文章于 2024-04-12 22:54:32 发布 · 241 阅读 · 0

本文介绍了两种解决Ajax跨域问题的方法：一是通过设置Access-Control-Allow-Origin头部信息；二是使用jsonp进行跨域请求，并详细解释了这两种方法的具体实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

浏览器不允许Ajax跨站请求，所以存在Ajax跨域问题，目前主要有两种办法解决。

 

1、在请求页面上使用Access-Control-Allow-Origin标头。

　　使用如下标头可以接受全部网站请求：

header('Access-Control-Allow-Origin:*')

　　使用如下标头可以接受指定网站请求：

header('Access-Control-Allow-Origin:http://www.abc.com')

　　所以，服务器写法：

1
2
3
header( 'Access-Control-Allow-Origin:*' );
 
die ( json_encode( array ( 'msg' => 'msg....' )) );

　　ajax写法和平常一样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang= "en"  class = "" >
<head>http: //i.cnblogs.com/EditPosts.aspx?opt=1
<meta charset= "utf-8"  />
<title>测试</title>
<script src= "http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js" ></script>
<body>
<script>
     $.ajax({
         url: 'http://192.168.1.124/homekoo.com/zde/cors_1.php' ,
         dataType: 'json' ,
         success: function (data){
             alert(data.msg);
         }
     });
</script>
</body>
</html>

 

2、使用jsonp跨域请求。

　　服务器：

1
2
$data  = json_encode( array ( 'msg' => 'msg....' ));
die (  $_REQUEST [ 'function_name_index' ]. '(' . $data . ')'  );

 　　ajax请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<! DOCTYPE  html>
< html  lang="en" class="">
< head >
< meta  charset="utf-8" />
< title >测试</ title >
< script  src="http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js"></ script >
< body >
< script >
     $.ajax({
         url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
         dataType:'jsonp',
         jsonp:'function_name_index',
         jsonpCallback:'function_name',
         success:function(data){
             alert(data.msg);
         }
     });
</ script >
</ body >
</ html >

 在ajax请求中，使用jsonp数据格式，所以讲dataType参数设置为jsonp，平常，还加到了jsonp和jsonpCallback两个参数，结合代码，不难看出这两个参数作用：

　　jsonp的作用是设置服务器获取回调函数名称参数的下标参数，jsonpCallback的作用就是设置回调函数，相当于input标签中name和value，jsonp对应name，value对应jsonpCallback。

　　更多jsonp请求可以参考：http://www.cnblogs.com/duanhuajian/p/3152617.html，有很详细的原理介绍。

 

当然，对已一些简单的GET请求，平不需要回调函数处理，可以使用script、img、iframe 等html标签设置的src属性产生GET请求，这里不在讨论情况了。

原文链接：https://www.cnblogs.com/pandang/p/5341250.html

Ajax跨域问题 解决方案
11-09
关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)，内容大概如下: 什么是ajax跨域 o原理 o表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨域 oJSONP方式 oCORS方式 o代理请求方式 如何分析ajax跨域 ohttp抓包的分析 o一些示例
有关Ajax跨域问题的两种解决方法
12-11
Ajax跨域是前端开发中常见的问题，本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误： XMLHttpRequest cannot load ...
ajax跨域问题解决方案
weixin_34162695的博客
06-20 209
今天来记录一下关于ajax跨域的一些问题。以备不时之需。 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 解决方式 通常来说，比较通用的有如下两种方式，一种...
ajax的跨域问题
不想写代码的一天
06-18 251
这是一个简单的ajax 异步发送请求获取数据 var http =new XMLHttpRequest(); http.open("get","txt/ajax.txt",true); http.send(); function showdata(callback){ http.onreadystatechange =function(){ if(...
AJAX跨域问题解决办法
TechChan的专栏
07-14 861
ajax伴随的goole 的推动，越来越多的站点开始使用了，在开大ajax程序的时候会遇到很多的问题，主要有以下几个方面： 1.跨浏览器问题 2.历史后退状态问题 3.跨域问题 　　跨浏览器的问题因为现在有很多的开元的框架已经解决了，我们无需为此而烦恼。　　历史后退状态问题我们可
ajax跨域问题分析与springboot解决方法
01-08
**解决Ajax跨域问题的方法** 1. **CORS(Cross-Origin Resource Sharing)**: CORS是一种现代浏览器支持的跨域访问控制机制。在Spring Boot中，可以通过两种方式实现CORS支持： - **注解形式**：在Controller层的...
SpringBoot解决ajax跨域问题的方法
08-27
SpringBoot解决ajax跨域问题的方法有两种：使用@Configuration注解和使用CorsFilter。第一种方式简单易用，但是在服务器抛出500错误时依然存在跨域问题。第二种方式更加灵活，允许我们自定义跨域配置，但需要手动...
ajax跨域问题解决思路
Annie的博客
09-13 208
一、问题 浏览器出于安全考虑，当发现前端xhr请求跨域时，会进行校验，若校验不通过，则会报错。 二、解决思路 1、禁止浏览器校验 缺点：需用户操作，存在安全隐患 2、使用jsonp代替xhr 原理：发送请求时增加了约定参数（默认为callback），后台接受到约定参数后将返回的数据由json转为JavaScript，使用函数调用的形式，函数名是约定参数的值，函数值是...
关于ajax跨域问题的几种常见解决方案，附代码。
03-01
什么是跨域，跨域出现的场景，模拟跨域，springmvc下解决跨域，springboot下解决跨域。绝对原创。
AJAX的跨域访问-两种有效的解决方法介绍
10-27
本篇文章是对AJAX的跨域访问-两种有效的解决方法进行了详细的分析介绍，需要的朋友参考下
Ajax跨域访问解决方案
04-01
NULL 博文链接：https://exceptioneye.iteye.com/blog/1405495
解决ajax跨域问题【5种解决方案】
weixin_30675967的博客
06-05 149
什么是跨域问题?跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。 查看浏览器开发者工具Console报错： Failed to load http://a.a.com:8080/A/Fr...
ajax跨域问题
iteye_13083的博客
01-04 173
不知是跨域问题 起 因是这样的，为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json)，当时特别困惑，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用 ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。这样反反复复改来改去...
ajax请求跨域问题分析与解决
流离岁月的博客
03-15 355
ajax请求跨域问题分析与解决 一. ajax请求跨域分析： 跨域问题来源于JavaScript的同源策略，即只有 协议+域名+端口号 (如存在)相同，则允许相互访问,若是协议，域名，端口号有一个不同就会发生跨域问题。 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二.解决思路 1.解决浏览器限制问题：通...
Ajax跨域请求的解决办法
ぁ颩ぁ囩ぁ
11-08 142
由于项目需要，对项目进行优化，将项目中的一部分动态页面生成静态页面来提高访问的速度，随后这些静态页面与web服务器分开，存于其他服务器，并为其指定了二级域名。问题来了，导致以前写的ajax全部over。   于是埋头苦找问题，照旧，在ajax的后提方法中设置断点，不料，断点尽然跳不进，后来，将ajax方法中与后台交互的url改为全路径（不用相对路径），结果，断点顺利进入，欣喜若狂。于是将所有ur...
跨域冲突问题解决
热门推荐
weixin_41827053的博客
07-28 1万+
nginx 跨域处理
Ajax跨域请求
最新发布
weixin_72256328的博客
04-12 2509
Ajax跨域请求
解决ajax跨域问题的CORS策略工具包
描述中简短地提及了“Allow_CORS__Access-Control-Allow-Origin”，这表明压缩包可能包含了解决AJAX跨域问题的方法或工具。 标签“ajax跨域问题”指出了文件所涉及的具体技术问题。AJAX（Asynchronous JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值