Ajax跨越问题原因分析与解决思路

1.什么是AJAX跨域问题

简单来说,就是前端调用后端服务接口时 如果服务接口不是同一个域,就会产生跨域问题

2.AJAX跨域场景

前后端分离、服务化的开发模式 前后端开发独立,前端需要大量调用后端接口的场景 只要后端接口不是同一个域,就会产生跨域问题 跨域问题很普遍,解决跨域问题也很重要

3.AJAX跨域原因

浏览器限制:浏览器安全校验限制 跨域(协议、域名、端口任何一个不一样都会认为是跨域) XHR(XMLHttpRequest)请求

4.AJAX跨域问题解决思路

浏览器:浏览器取下跨域校验,实际价值不大 XHR:不使用XHR,使用JSONP,有很多弊端,无法满足现在的开发要求 跨域:被调用方修改支持跨域调用(指定参数);调用方修改隐藏跨域(基于代理)

5.JSONP解决跨域访问

1.服务端JSONP格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction

假设客户期望返回JSON数据:[“customername1”,”customername2”]。

真正返回到客户端的数据显示为: callbackFunction([“customername1”,”customername2”])。

服务端文件jsonp.php代码为:

jsonp.php 文件代码

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
2.客户端
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';

    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

Nginx防盗链+Nginx访问控制+Nginx解析php相关配置+Nginx 代理

3445
来自专栏前端学习心得

跨域几种方式

43911
来自专栏Web 开发

各种Kill跨域Boss的方法

对于JSON数据,可以很容易的获取。不过在结合Android的WebView后会存在一个很严重的问题。

700
来自专栏阮一峰的网络日志

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpR...

3197
来自专栏Ryan Miao

Javascript跨域后台设置拦截

子域名之间互相访问需要跨域 结论放在开头: 服务端必须设置允许跨域 客户端带cookie需要设置withCredentials 无论服务端是否允许跨域,该req...

2788
来自专栏Debian社区

高性能缓存服务器 Nuster

Nuster 是一个基于 HAProxy 的高性能缓存服务器。Nuster 完全兼容 HAProxy,并且利用 HAProxy 的 ACL 功能来提供非常细致的...

1121
来自专栏木头编程 - moTzxx

跨域解决方案整理笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1343
来自专栏互联网杂技

详解JavaScript跨域问题

什么是跨域? 概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。 URL 说明 是否允许通信 ...

38410
来自专栏ChaMd5安全团队

关于JSON CSRF的一些思考

关于JSON CSRF的一些思考 From ChaMd5安全团队核心成员 Maple CSRF作为常见漏洞,一直受到关注和研究,JSON是一种应用广泛的轻量级数...

4099
来自专栏编程之旅

nginx配置二级域名

最近为了练手Vue框架,写了一个博客项目,昨天刚刚把个人博客部署上线,因为前后端分离,所以使用Ajax来请求后端api接口获取数据,部署的过程中碰到了一个坑。我...

1.6K6

扫码关注云+社区

领取腾讯云代金券