4赞

当前位置: 开发笔记 > 编程语言 > 正文

详解ajax跨域问题解决方案

作者：勤奋的瞌睡猪_715 | 2022-12-14 16:05

这篇文章主要介绍了详解ajax跨域问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

跨域

同源策略限制

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

解决方式

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

服务器设置响应头
服务器代理
客户端采用脚本回调机制。

方式一

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

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

也不会有什么效果。

正常ajax请求

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

test1.html




 
 ajax 测试

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

<?php

echo "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直接去请求其他网站的数据。




 
 ajax 测试

结果如下：

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

启用代理模式

刚才的HTML页面，咱们还是用自己的接口：

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

具体如下：




 
 ajax 测试

然后对应的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数据，通过回调的方式传回给客户端。

原生实现




 
 ajax 测试
 




















    

    
        
            
            
                
                    
                
            

            
                勤奋的瞌睡猪_715            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1Javascript中的实例与引用vs对象
                
                                
                    2AWS cli查询以获取具有特定源名称的Cloudfront"域名"
                
                                
                    3d3美国国家地图与标记,缩放转换问题
                
                                
                    4表测试多返回值函数
                
                                
                    5OpenMP vs gcc编译器优化
                
                                
                    6Xilinx TCL Shell在哪里发出结果？
                
                                
                    7如何强制查询范围？
                
                                
                    8在Angular中,您如何确定活动路线？
                
                                
                    9为什么lambda不会从达到范围捕获类型const double,但const int是？
                
                                
                    10JavaScript中有"! - "做什么？
                
                                
                    11通过联系人ID查询发票时，Xero API不返回值
                
                                
                    12使用许多不同种类的表情符号和语言时，对C ++ JNI NewStringUTF的调用会使android应用程序崩溃（除了ascii，但仍然是有效的修改版utf-8）
                
                                
                    13在Python数组中使用通配符？
                
                                
                    14Hexfloat机械手和精度
                
                                
                    15如何在Three.js中拉伸圆几何？
                
                                
                    16播放无法连接到(PostgreSQL)数据库[默认]
                
                                
                    17在mingw-w64 / msys2中编译的应用程序，“该应用程序无法正确启动（0xc00007b）”
                
                                
                    18使用PowerMockito 1.6验证静态方法调用
                
                                
                    19使用List中的数组 -  OOP  -  Generic List
                
                                
                    20Prolog打印所有解决方案并希望获得是/否输出

DevBox开发工具箱 | 专业的在线开发工具网站