Ajax跨域访问

最新推荐文章于 2022-09-06 22:32:08 发布

weixin_46370867

最新推荐文章于 2022-09-06 22:32:08 发布

阅读量228

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109732387

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

成功的信念在人脑中的作用就如闹钟，会在你需要时将你唤醒

下面是对跨域访问的整理，希望可以帮助到有需要的小伙伴

一、同源策略

同源策略：该网址不能访问别的网址的信息

1995年，同源策略由Netscape公司引入浏览器。

目前，所有浏览器都实行同源策略。

同源策略的目的：

保证用户信息的安全，防止恶意的网站窃取数据

同源策略越来越严格

非同源有三种行为受到限制：

Cookie、LocalStorage和ndexDB无法读取
DOM无法获得
AJAX请求不能发送

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

同源：（以下三个必须同时相同才是同源）

协议相同
域名相同（域名是协议和端口号组成的虚拟域名，相当于xxx路xxx号）
端口相同

一级域名：jd.com （没有前缀）

二级域名（在一级域名前面加前缀，由于前缀不同，二级域名也不同）：www.jd.com 或 images.jd.com 等等

一个一级域名可以有任意多个二级域名
一级域名、二级域名的访问，就是跨域。

大多数域名都是拼音，baidu 、taobao、jngdong

二、域名（网域/IP地址）是什么

域名(Domain Name)又称为网域

访问的URL地址：网络协议 + 域名(IP地址) + 端口号 + 资源路径

同源：网络协议相同、域名相同、端口号相同
不同源：
1. 域名不相同：完全跨域
2. 域名相同，端口号不同：跨子域

互联网默认原则：同源策略（不允许跨域访问）

URL	说明
http://www.acon/ajs和 http://www.acom/bjs	同—域名下
http://www.acor/lablajs和 http://www.a.com/script/bjs	同一域名下不同文件夹
http://www.acom:800Olajs 和 http://www.a.com/bjs	同一域名，不同端口
http://www.acornlajs和 https://www.a.corn/bjs	同一域名，不同协议
http://www.acorn/ajs和 http://12700.10O/bjs	域名和域名对应ip
http://wwwacomn/ajs和 http://scriptacom/bjs	主域相同，子域不同
http://www.acom/ajs 和 http://acom/bis	同一域名，不同二级域名(同上)
http://www.acornVajs 和 http://wwwbcom/bjs	不同域名

三、跨域是什么

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源

只要协议、域名、端口有任何一个的不同，就被当作是跨域

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPl遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。

常见跨域分为以下两种:
- 完全跨域:就是指一个顶级域名方向另一个顶级域名。
- 跨子域:相同顶级域名下的两个子级域名相互通信。

四、常见跨域技术

常见跨域

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

link元素
script元素
img元素
iframe元素
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
- iframe标签支持HTML中的全局属性
- iframe标签只是HTML中的事件属性

猫云（开源项目CDN）：https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见跨域访问</title>
    <!--引入JS链接-->
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <!--引入CSS链接-->
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
    
</head>
<body>
    <!--引入图片链接-->
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1532589952,1108751024&fm=26&gp=0.jpg">
</body>
</html>

在这里插入图片描述

五、JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”。

可用于解决主流浏览器的跨域数据访问的问题。

JSON的使用模式：利用script元素的开放策略，网页可以得到从其他原动态产生的JSON资料

script元素实现

网页通过添加一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script元素实现JSONP跨域</title>
</head>
<body>
<!--
    通过<script>元素实现JSONP跨域访问
    * 利用<script>元素的src属性指定服务器端地址
    * 同时将指定的回调函数名称发送指定服务区
-->


    <script>
        // 定义发送服务器端的回调函数 - 利用蚕食方式进行接收
        function fn(data){
            console.log(data);
        }
    </script>

    <script src="http://127.0.0.1: 3000?callback=fn"></script>
</body>
</html>

在这里插入图片描述

$.getJSON()方法

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

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON实现跨域访问</title>
</head>
<body>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        // 通过使用JSONP形式的回调函数来加载其他网域的JSON数据
        $.getJSON('http://127.0.1:3000?callback=?',function (data) {
            console.log(data);
        });
    </script>
</body>
</html>