跨域问题以及Ajax和Axios的区别

news2024/11/18 17:35:36

文章目录

  • 1. 同源策略
  • 2. 同源策略案例
  • 3. 什么是跨域
  • 4. 跨域解决方法
    • 4.1 Ajax的jsonp
    • 4.2 CORS方式
    • 4.3 Nginx 反向代理
  • 5. Axios 和 Ajax 的区别
  • 6. Axios 和 Ajax 的区别及优缺点
    • 6.1 Ajax：
      • 6.1.1 什么是Ajax
      • 6.1.2 Ajax的原理
      • 6.1.3 核心对象
      • 6.1.4 Ajax优缺点
        • 6.1.4.1 优点：
        • 6.1.4.2 缺点：
      • 6.1.5 Ajax适用场景
      • 6.1.6 Ajax不适用场景
      • 6.1.7 代码
      • 6.1.8 Ajax请求的五个步骤
    • 6.2 Axios：
      • 6.2.1 Axios是什么
      • 6.2.2 Axios有哪些特性
      • 6.2.3 执行get请求，有两种方式
      • 6.2.4 执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。
  • 7. Axios和Ajax的区别

1. 同源策略

同源策略，是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

规定：浏览器要求，在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，则满足同源策略，可以访问服务器。

要求：
协议、域名、端口号都相同，只要有一个不相同，那么都是非同源
在这里插入图片描述
要求：
1.浏览器的请求路径
2.Ajax请求的网址

2. 同源策略案例

在这里插入图片描述

3. 什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

4. 跨域解决方法

4.1 Ajax的jsonp

  • JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
  • jsonp解决跨域问题的原理是：script不受同源策略的影响。
  • jsonp实现跨域：前端通过script标签将函数以参数的形式传递给后台，后台通过解析请求的字符串，拿到该函数，然后让该函数以执行的状态返回给前端，并且在其中传入数据。不过jsonp请求只能支持get请求方式。
  • 核心用法
    利用<script src="远程服务网址>
    返回值语法固定的：callback(JSON数据)

4.2 CORS方式

CORS（Cross-origin resource sharing） “跨域资源共享”，现在的主流的浏览器都支持CORS的方式.。如果需要跨域,则需要配置响应头信息，标识是否允许。

服务器端标识：
在这里插入图片描述
检查响应头信息：
在这里插入图片描述
CORS调用原理图：
在这里插入图片描述

4.3 Nginx 反向代理

利用nginx反向代理搭建一个代理服务器，接受客户端请求，然后将请求转发给服务器，拿到响应后，再将响应转发给客户端
在这里插入图片描述

5. Axios 和 Ajax 的区别

1、Axios是一个基于Promise的HTTP库，而Ajax是对原生XHR的封装；
2、Ajax技术实现了局部数据的刷新，而Axios实现了对ajax的封装。

6. Axios 和 Ajax 的区别及优缺点

6.1 Ajax：

6.1.1 什么是Ajax

Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。

异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。

6.1.2 Ajax的原理

由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

6.1.3 核心对象

XMLHttpReques

6.1.4 Ajax优缺点

6.1.4.1 优点：

1、无刷新更新数据
2、异步与服务器通信
3、前端和后端负载平衡
4、基于标准被广泛支持
5、界面与应用分离

6.1.4.2 缺点：

1、ajax不能使用Back和history功能，即对浏览器机制的破坏。
2、安全问题 ajax暴露了与服务器交互的细节
3、对收索引擎的支持比较弱
4、破坏程序的异常处理机制
5、违背URL和资源定位的初衷
6、ajax不能很好的支持移动设备
7、太多客户端代码造成开发上的成本

6.1.5 Ajax适用场景

<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景

6.1.6 Ajax不适用场景

<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵

6.1.7 代码

$.ajax({
   type: 'get',
   url: '/getuser/data',
   dataType: 'json',
   data: {
        firstName: '张',
        lastName: '三'
   },
   success: function (response) {
       console.log(response);
   },
   error: function (error) {
	   console.log(error);
   }
});

<script type="text/javascript">
    function login() {
        $.ajax({
            type: 'post',
            url: '/email/login',
            dataType: 'json',
            data: {
                'account': $('#account').val(),
                'password': $('#password').val()
            },
            success: function (data) {
                if (data.code == 1) {
                    alert("登录成功");
                    window.location.href = "http://localhost:8080/email/success";
                } else {
                    alert("密码错误，请重新输入！")
                    window.location.href = "http://localhost:8080/email/error"
                }
            }
        })
    }
</script>

<script type="text/javascript">
    function addFruit() {
        let name = $.trim($("#fname").val());
        let price = $.trim($("#fprice").val());
        let count = $.trim($("#fcount").val());
        $.post("http://localhost:8080/fruit/add",
            {name: name, price: price, count: count},
            function (data) {
                if (data.code == 1) {
                    alert(data.message);
                    window.location.href = "http://localhost:8080/fruit/index";
                }
                if (data.code == 0) {
                    alert(data.message);
                }
            });
    }
 
    function delFruit(id) {
        if (window.confirm("是否确认删除" + id + "?")) {
            $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id},
                function (data) {
                    if (data.code == 1) {
                        alert(data.message);
                        window.location.href = "http://localhost:8080/fruit/index";
                    }
                    if (data.code == 0) {
                        alert(data.message);
                    }
                });
        }
    }
</script>

6.1.8 Ajax请求的五个步骤

  1. 创建XMLHttpRequest异步对象
  2. 设置回调函数
  3. 使用open方法与服务器建立连接
  4. 向服务器发送数据
  5. 在回调函数中针对不同的响应状态进行处理

6.2 Axios：

6.2.1 Axios是什么

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

6.2.2 Axios有哪些特性

1、在浏览器中创建 XMLHttpRequests
2、在node.js则创建http请求
3、支持Promise API
4、支持拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换成JSON数据格式
8、客户端支持防御XSRF

6.2.3 执行get请求，有两种方式

params 是用于拼接 url 的，get 请求传参就是拼到 url 中，
而 data 是放在 request body 中的，用于 post 请求

// 第一种写法:将参数直接写在url中
axios.get('/query?name=tom').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第二种写法:将参数直接写在params中
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第三种写法:将参数直接写在params中
axios({
  method: 'get',
  url: '/query',
  params: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

6.2.4 执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。

axios.post('/query', {
    name: 'tom',
    icon: 'img_path'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

下面这种data方式将参数放在请求体中，后端需要使用@RequestBody +实体类来接收。

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        data: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

这种params传参方式其实和get请求类似，把请求参数放到了请求头中，
http://127.0.0.1/user?age=18&sex=男
所以这种需要使用@RequestParam来接收参数

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        params: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

7. Axios和Ajax的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来 说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有， ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注： 传统Ajax 指的是 XMLHttpRequest（XHR），axios和jQuer ajax都是对Ajax的封装。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/388836.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大白话+画图 从源码角度一步步搞懂ArrayList和LinkedList的使用

大白话+画图 从源码角度一步步搞懂ArrayList和LinkedList的使用

1.说说ArrayList 1.基本原理 ArrayList&#xff0c;原理就是底层基于数组来实现。 01.基本原理&#xff1a; 数组的长度是固定的&#xff0c;java里面数组都是定长数组&#xff0c;比如数组大小设置为100&#xff0c;此时你不停的往ArrayList里面塞入这个数据&#xff0c;此…
阅读更多...
Warshall算法求传递闭包及Python编程的实现

Warshall算法求传递闭包及Python编程的实现

弗洛伊德算法-Floyd(Floyd-Warshall)-求多源最短路径&#xff0c;求传递闭包 Floyd算法又称为插点法&#xff0c;是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法&#xff0c; 与Dijkstra算法类似。该算法名称以创始人之一、1978年图灵奖获得者、斯坦福大…
阅读更多...
minikube搭建Kubernetes环境

minikube搭建Kubernetes环境

前言 Kubernetes 一般都运行在大规模的计算集群上&#xff0c;管理很严格&#xff0c;Kubernetes 充分考虑到了这方面的需求&#xff0c;提供了一些快速搭建 Kubernetes 环境的工具。 minikube 它是一个“迷你”版本的 Kubernetes&#xff0c;自从 2016 年发布以来一直在积极地…
阅读更多...
Lesson 8.1 决策树的核心思想与建模流程

Lesson 8.1 决策树的核心思想与建模流程

文章目录一、借助逻辑回归构建决策树1. 决策树实例2. 决策树知识补充2.1 决策树简单构建2.2 决策树的分类过程2.3 决策树模型本质2.4 决策树的树生长过程2.5 树模型的基本结构二、决策树的分类与流派1. ID3(Iterative Dichotomiser 3) 、C4.5、C5.0 决策树2. CART 决策树3. CHA…
阅读更多...
minio安装配置和使用（一）

minio安装配置和使用（一）

minio官网https://www.minio.org.cn 从官网获得安装文件。官网提供了Binary、RPM、DEB三种方式安装minio。 Binary方式我在我的测试环境中没有测试通过&#xff0c;按官网方式下载执行会报错如下&#xff1a; 查了下这个错误提示&#xff0c;似乎跟内存有关。 改用RPM方式安…
阅读更多...
HCIP第一个实验

HCIP第一个实验

实验要求与实验拓扑子网划分分析将骨干链路看成一个整体&#xff0c;路由器后的2个环回地址先看成一个&#xff0c;最后再进行拆分。计算得出&#xff0c;一共需要划分为6个子网段&#xff0c;取三位。再将每一条网段&#xff0c;按照题目要求进行划分最后完成子网划分。子网划…
阅读更多...
进行嵌入式C语言编程调试的通用办法

进行嵌入式C语言编程调试的通用办法

总结了一下调试我们嵌入式C程序的一些基本的办法和思想&#xff0c;供大家学习参考&#xff1a; 打印日志&#xff1a;在代码中添加打印语句&#xff0c;输出变量值、函数调用等信息&#xff0c;以便在程序运行时观察程序执行情况。 断点调试&#xff1a;在代码中添加断点&…
阅读更多...
【编程实践】用 go 语言实现 B+ 树

【编程实践】用 go 语言实现 B+ 树

文章目录 用 go 语言实现 B+ 树定义 B+ 树的结构B+ 树的插入操作函数B+ 树的查找小结用 go 语言实现 B+ 树 B+ 树是一种平衡的查找树，它可以有效组织存储大量的键值对，从而支持快速的插入和查找操作。 Go 语言可以用来实现 B+ 树，实现的思路是：首先，定义 B+ 树的结构，其…
阅读更多...
【Linux】安装Linux操作系统具体步骤

【Linux】安装Linux操作系统具体步骤

1). 选择创建新的虚拟机 2). 选择"典型"配置 3). 选择"稍后安装操作系统(S)" 4). 选择"Linux"操作系统,"CentOS7 64位"版本 5). 设置虚拟机的名称及系统文件存放路径 6). 设置磁盘容量 7). 自定义硬件信息 8). 启动上述创建的新虚拟机…
阅读更多...
【C++初阶】list的使用

【C++初阶】list的使用

大家好我是沐曦希&#x1f495; 文章目录一、前言二、构造三、迭代器四、增删查改1.头插头删2.尾插尾删3.查找和插入4.删除五、其他成员函数1.排序和去重2.splice和remove3.resize一、前言 list本质是带头双向循环链表&#xff0c;本文只对list的一些常用接口进行说明&#xf…
阅读更多...
Qt creator中操作QAction加入QToolBar

Qt creator中操作QAction加入QToolBar

背景&#xff1a;个人笔记。我之前没有系统化学习过任何资料&#xff0c;使用很多工具都是按需出发&#xff0c;直接上手&#xff0c;遇到问题再研究的。所以会有一些弯路。本文言语中难免有对个人情绪的生动描述&#xff0c;希望不要影响读者心情&#xff0c;这只是我学习过程…
阅读更多...
前端网络安全

前端网络安全

什么是同源策略同源指的是&#xff1a;协议、端口号、域名必须一致。他是浏览器的一个用于隔离潜在恶意文件的重要安全机制。限制了从同一个源加载的文档或脚本&#xff0c;与另一个源的资源进行交互。同源策略主要限制了三个方面&#xff1a;当前域下的js脚本不能够访问其他域…
阅读更多...
waf和web应用防火墙的区别

waf和web应用防火墙的区别

waf和web应用防火墙有什么区别?相信这两个词大家都不陌生&#xff0c;特别是做互联网行业的小伙伴们。对于waf和web应用防火墙&#xff0c;这两个名词的理解应该都很清楚。但是很多小伙伴们不知道WAF防火墙与Web防火墙有什么区别&#xff0c;它们之间的区别在哪里&#xff0c;…
阅读更多...
Spring Cloud(微服务)学习篇(七)

Spring Cloud(微服务)学习篇(七)

Spring Cloud(微服务)学习篇(七) 1.使用代码的方式实现流量限制规则 1.1 变更SentinelController类 1.1.1 加入的代码 //流控限制 (一个或多个资源限流), postConstruct注解的作用是保证项目一启动就会加载,// 一个rule就是一个规则PostConstructpublic void FlowRule(){Li…
阅读更多...
【C++】string的成员函数、成员常量和非成员函数

【C++】string的成员函数、成员常量和非成员函数

目录 string 1. string的成员函数 1.1 构造、析构和赋值运算符重载 1.1.1 构造函数 1.1.2 析构函数 1.1.3 赋值运算符重载 1.2 迭代器 1.3 容量 1.4 元素访问 1.4.1 遍历方法 1.5 修改器 1.6 字符串操作 2. string的成员常量 3. string的非成员函数 string 以下…
阅读更多...
javaEE 初阶 — 应用层中的 DNS 协议（域名解析系统）

javaEE 初阶 — 应用层中的 DNS 协议（域名解析系统）

文章目录什么是域名1. 如何建立 域名 与 IP 的对应关系2. 域名的分级什么是域名 域名也就是平常所说的网址&#xff0c;比如 www.baidu.com。 其实网络上的服务器要访问这个网址&#xff0c;需要的是 IP 地址。、 但是 IP 地址比较拗口不方便记忆&#xff0c;于是就有使用一些…
阅读更多...
单向非循环链表

单向非循环链表

1、顺序表遗留问题 1. 中间/头部的插入删除&#xff0c;时间复杂度为O(N) 2. 增容需要申请新空间&#xff0c;使用malloc、realloc等函数拷贝数据&#xff0c;释放旧空间。会有不小的消耗。 3. 当我们以2倍速度增容时&#xff0c;势必会有一定的空间浪费。例如当前容量为100&a…
阅读更多...
IDEA这些配置，简单高效

IDEA这些配置，简单高效

优化导包配置配置路径&#xff1a;File-> settings -> Editor -> General -> Auto ImportAdd unambiguous imports on the fly&#xff1a;自动导包Optimize imports on th fly (for current project)&#xff1a;自动删除无用包代码提示取消大小写配置路径&#x…
阅读更多...
AOP（概念和原理）

AOP（概念和原理）

文章目录1. AOP&#xff08;概念&#xff09;2. AOP&#xff08;底层原理&#xff09;2.1 AOP底层使用动态代理&#xff08;两种&#xff09;2.2 AOP 底层使用哪种代理方式 &#xff1f;3. AOP相关概念3.1 AOP术语4. AOP操作4.1 基于AspectJ实现AOP操作4.2 切点表达式4.3 基于A…
阅读更多...
6 分布式事务简介

6 分布式事务简介

分布式事务简介 概念 基础概念&#xff1a;事务ACID * A&#xff08;Atomic&#xff09;&#xff1a;原子性&#xff0c;构成事务的所有操作&#xff0c;要么都执行完成&#xff0c;要么全部不执行&#xff0c;不可能出现部分成功部分失 败的情况。 * C&#xff08;Consisten…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023