Ajax跨域请求--CrossDomain

在认识跨域之前，先简单了解下域名和协议名，比如下面这个 URL

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业成都移动服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

http://mail.163.com/index.html

http:// 协议名，也就是HTTP超文本传输协议

mail 服务器名

163.com 域名

mail.163.com 网站名

/ 根目录

index.html 根目录下的默认网页

1、什么是跨域请求？

请求的下一个资源所在的协议、域名、端口号三者之一与当前资源不一致就称为 跨域请求

简单理解，就是 $.get(url, [data], [callback], [type]) 里面的 url 的协议名、域名或者端口号与当前域名不一样

Ajax 跨域请求-- Cross Domain

为了避免晦涩难懂的文字，我们直接上一个小 demo：




    
    


非跨域请求
非跨域按钮

跨域请求
跨域按钮

在浏览器地址栏输入“http://localhost:8081/Ajax/cross.html”打开页面，点击“非跨域按钮”，查看控制台

Ajax 跨域请求-- Cross Domain

点击“跨域按钮”，查看控制台，发现 XHR请求失败了，很明显，请求的域名不同，这就是典型的跨域

Ajax 跨域请求-- Cross Domain

查看 Network，XHR请求发起了，而且状态码是200

Ajax 跨域请求-- Cross Domain

查看请求头部消息，显示有 24 字节的响应消息

Ajax 跨域请求-- Cross Domain

查看响应消息，却显示“这个请求没有可用的响应消息”

Ajax 跨域请求-- Cross Domain

2、浏览器允许跨域请求吗？

允许：

PHP代码：

'Tom','age'=>20];

echo json_encode($data);

点击“非跨域按钮“，可以正常发起 Ajax 请求

点击“跨域按钮”，报错了，说明这个属于跨域

按照控制台给出的提示，我们在 php 页面中设置 Access-Control-Allow-Origin 头部

PHP代码：

'Tom','age'=>20];

echo json_encode($data);

看到 btn2，真是太难得了，这个也就说明设置 Access-Control-Allow-Origin 头部是可以解决跨域的

3-2、使用 JSONP

基于3-1的示例代码，我们再来看一个例子：

HTML代码：




    
    


跨域按钮

PHP代码：

'Tom','age'=>20];

$json =  json_encode($data);  //返回一个json{"":"","":20}'

echo 'doResponse('.$json.')';

通过浏览器输入“http://localhost:8081/Ajax/jsonp01.html”打开网页，这是一个典型的跨域请求，这里可以使用JSONP手段来解决

在$.ajax 方法中有一个 dataType属性，如果将该属性设置成 dataType:"jsonp"，就能实现跨域

把上面的代码稍作修改：

HTML代码：




    
    


跨域按钮

PHP代码：

'Tom','age'=>20];

$json =  json_encode($data);  //'{"":"","":20}'

echo 'doResponse('.$json.')';

重新打开页面，可以拿到数据了

如果想更深入的了解 JSONP 原理，可以查看另一篇文章《详解 JSON 和 JSONP》

http://dapengtalk.blog.51cto.com/11549574/1877684

网站名称：Ajax跨域请求--CrossDomain
网站URL：http://csdahua.cn/article/iggdps.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

Ajax跨域请求--CrossDomain

非跨域请求

跨域请求

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

Ajax跨域请求--CrossDomain

非跨域请求

跨域请求

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们