Ajax实现跨域访问

最新推荐文章于 2024-03-29 02:24:34 发布

华惜

最新推荐文章于 2024-03-29 02:24:34 发布

阅读量540

点赞数 3

CC 4.0 BY-SA版权

文章标签： ajax jsonp

本文链接：https://blog.youkuaiyun.com/weixin_44966759/article/details/108493721

本文介绍了跨域访问的概念，详细阐述了同源策略及其限制，并探讨了常见的跨域场景。重点讲解了JSONP的工作原理，通过添加<script>元素和jQuery的$.getJSON()方法实现跨域数据请求。

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

实现跨域访问

跨域访问是什么

同源策略

1995年。同源策略有Netscape公司引入浏览器。目前，所有浏览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制：

1.Cookie，LocalStorage和indexDB无法读取

2.DOM无法获得

3.AJAX请求不能发送

虽然这些限制是必要的，但是有时很不方便，合理的用途也收到影响。

所谓“同源”指的是“三个相同”：协议相同，域名相同以及端口相同。

	同源	不同源
网络协议	相同	相同
域名	相同	相同/不相同
端口号	相同	不相同

域名是什么

域名（Domain Name)又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

URL	说明
http://www.a.com/a.js和 http://www.a.com/b.js	同一域名下
http://www.a.com/lab/a.js和 http://www.a.com/script/b.js	同—域名下不同文件夹
http://www.a.com:8000/a.js和http://www.a.com/b.js	同—域名，不同端
http://www.a.com/a.js和 https://www.a.com/b.js	同一域名，不同协议
http://www.a.com/a.js和 http://127.0.0.100/b.js	域名和域名对应ip
http://wwwa.com/a.js和 http://script.a.com/b.js	主域相同，子域不同
http://www.a.com/a.js和 http://a.com/b.js	同—域名，不同二级域名（同上）
http://www.a.com/a.js和 http://www.b.com/b.js	不同域名

跨域是什么

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。

出于安全原因，刘览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。

常见跨域分为以下两种:

完全跨域：就是指一个顶级域名方向另一个顶级域名。
跨子域：相同顶级域名下的两个子级域名相互通信。

常见跨域

HTML页面中一些允许指定路径的元素具有跨域特性：

< link >元素
< script >元素
< img >元素
< iframe >元素

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css"rel="stylesheet">
<img src="http://c.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f40ef23e9edfe9925bc317d26.jpg">

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的跨域访问</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/2.0/animate.css">
</head>
<body>
<script>
    console.log($);
</script>

</body>
</html>

JSONP是什么

JSONP (JSON with Padding ）是JSON的一种“使用模式”，可用于解决主流刘览器的跨域数据访问的问题。

利用< scrip >元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。

简单来说就是json的一种使用模式用来解决跨域问题的

script>元素实现

网页通过后添加一个<script>元素，向服务器请求json数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

function addScriptTag(src){
	var script=document.createElement('script');
	script.setAttribute("type","text/javascript");
	script.src=src;
	document.body.appendChild(script);
	
}
window.onload=function(){
addScriptTag("http://127.0.0.1:3000?callback=foo");
}

function foo(data){
console.log('Yourpublic IP address is:'+data.ip);
}

在这里插入图片描述

$.getJSON()方法

jQuery中的$.getJSON()方法允许通过使用JSONP形式回调函数来加载其他网域的JSON数据。

$.getJSON('http://127.0.0.1:3000?callback=?',function(data){
console.log(data);
})

注意：$.getJSON()方法的第一个参数表示url，需要在该参数后面添加“callback=?”.jQuery将“？”自动替换为正确的函数名，以执行回调函数。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON实现跨域访问</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script>
    $.getJSON('http://127.0.0.1:3000?callback=?',function (data) {
        console.log(data);
    })
</script>
</body>
</html>