当前位置: 首页 > news >正文

Ajax同源策略及跨域问题

Ajax同源策略及跨域问题

    • 同源策略
    • ajax跨域问题
      • 什么是跨域?
      • 为什么不允许跨域?
      • 跨域解决方案
        • 1、CORS
        • 2、express自带的中间件cors
        • 3、JSONP
          • 原生JSONP
          • jQuery发送JSONP
        • 4、使用vscode的Live Server插件

同源策略

同源策略(Same-Origin Policy)是一种安全策略,是指:协议域名端口,只有以上三点都一样的情况下才允许访问相同的cookie、localStorage和发送Ajax请求,以上一点不同都会出现跨域问题

ajax跨域问题

什么是跨域?

在Ajax发请求时,需要显示的信息一直显示不出来,打开控制台发现出现以下错误信息:
Access to XMLHttpRequest at ‘http://localhost:8000/users’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
显示是由于 http://localhost:5500 向另外一个服务器地址 http://127.0.0.1:8000 发送请求的时候,由于协议名称域名端口中的某一项不一致造成的访问接口失败,也就是跨域
跨域是产生于浏览器的"同源策略",所谓同源策略是指:协议域名端口,只有以上三点都一样的情况下才允许访问相同的cookie、localStorage和发送Ajax请求,以上一点不同都会出现跨域问题

为什么不允许跨域?

浏览器跨域限制是出于安全性考虑。同源策略的实施可以防止恶意脚本通过跨域请求获取用户的敏感数据。如果浏览器允许跨域请求,那么恶意网站就可以伪装成其他网站,并窃取用户数据,导致安全风险。如果跨域可以请求的话,很多的服务器都会受到额外的攻击。禁止跨域是浏览器的行为,是浏览器为了网站的安全性,进行从当前的服务,访问其它服务器的地址,浏览器认为这是存在风险的,因此默认会组织跨域。

跨域解决方案

1、CORS

CORS :全称cross origin resource share (跨域资源共享)
工作原理: 服务器在返回响应报文的时候,在响应头中设置一个允许的header
response.setHeader("Access-Control-Allow-Origin", "*");
其他响应头:

	//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin","*");//任意头部信息response.setHeader("Access-Control-Allow-Headers","*");//预请求结果缓存response.setHeader("Access-Control-Max-Age","delta-seconds");//跨域请求时是否携带验证信息response.setHeader("Access-Control-Allow-Credentials","true");//设置请求允许的方法response.setHeader("Access-Control-Allow-Methods","*");//暴露头部信息response.setHeader("Access-Control-Expose-Headers","*");

注意:别打错了。。。最好复制过去,我就是因为control打多了一个 l 找了半天的错误。。。
例:

//1、引入express
const express = require("express");//2、创建应用对象
const app = express();//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
//GET请求
app.get("/server", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应response.send("HELLO AJAX");
});
//4、监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动,8000端口监听中");
});

2、express自带的中间件cors

安装一个包cors,并配置这个cors即可,它也是express的中间件;
它的作用是自动给每一个response设置默认请求头
这样就不用我们自己每一个接口都要设置一次了
安装命令 npm install cors
在服务端配置:

  var cors = require("cors");app.use(cors());

3、JSONP

有一些标签天生具有跨域能力,比如:imgscriptlinkiframe
JSONP(JSON with Padding)是一种利用<script>标签不受同源策略限制的特性进行跨域请求的方法。通过动态创建<script>标签,将请求的数据作为回调函数的参数返回到页面中。但是,JSONP只支持GET请求,且存在安全性和可维护性的问题。
script/img 等标签的src属性请求时不存在跨域问题的,但是只支持GET请求,因为get请求参数直接在url后面拼接,而post请求参数是放在请求体中

原生JSONP
  • 服务端:
// jsonp.html 检测用户名是否存在
app.all('/jsonp-server', (request, response) => {//响应一个数据const data = { exist: 1, msg: '用户名已存在' };let str = JSON.stringify(data); //对对象进行字符串转换//设置响应体response.send(`handle(${str})`);
})

实现用户名校验(模拟一下请求js代码的过程,并不是真的校验),服务端的响应体是一个函数的调用,那么我们就应该有这个函数,所以首先要声明handle函数,然后创建script标签,利用其src属性请求数据。

用户名:<input type="text" id="username">
<p></p>
<script>const input = document.querySelector('input');const p = document.querySelector('p');//声明handle函数function handle(data) {input.style.border = '1px solid #f00'; p.innerHTML = data.msg;p.style.color = 'red';}input.addEventListener('blur', function() {//获取用户输入值let username = this.value;//向服务器发送请求,监测用户名是否存在//1.创建script标签const script = document.createElement('script');//2.设置标签的src属性script.src = 'http://127.0.0.1:8000/jsonp-server';//3.将script插入到文档中document.body.appendChild(script);})
</script>
jQuery发送JSONP

服务端:

// JQuery-jsonp.html 
app.all('/jquery-jsonp-server', (request, response) => {//响应一个数据const data = { name: 'www', age: 18 };let str = JSON.stringify(data); //对对象进行字符串转换//接收callback参数let callback = request.query.callback;//返回结果,这个callback就相当于是个函数名,相当于handleresponse.send(`${callback}(${str})`);
})
<button>点击发送jsonp请求</button>
<div id="result"></div><script>$('button').eq(0).click(function() { //使用jquery发送jsonp请求时url后面要加参数callback=?,固定写法//Jquery中的getJSON,省去了jsonp中handle函数的定义,靠callback代替$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){$('#result').html(`名称:${data.name}<br>年龄:${data.age}`)})})
</script>

4、使用vscode的Live Server插件

最简单的方法!!!
在扩展里搜索Live Server并下载,直接在需要发送请求的页面右键点击Open whit Live Server即可
请添加图片描述
注:若使用Live Server还是不成功,在vscode里打开设置–>Live Server>Settings:Proxy,把enable改为true

相关文章:

Ajax同源策略及跨域问题

Ajax同源策略及跨域问题 同源策略ajax跨域问题什么是跨域&#xff1f;为什么不允许跨域&#xff1f;跨域解决方案1、CORS2、express自带的中间件cors3、JSONP原生JSONPjQuery发送JSONP 4、使用vscode的Live Server插件 同源策略 同源策略&#xff08;Same-Origin Policy&#…...

JavaScript:解构赋值【对象】

在JavaScript编程中&#xff0c;解构赋值是一种强大的技术&#xff0c;它允许我们从数组或对象中快速提取数据并赋值给变量。在本文中&#xff0c;我们将重点介绍对象解构&#xff0c;解释如何利用它从对象中提取数据&#xff0c;以通俗易懂的方式帮助你掌握这一技巧。 1. 什么…...

微服务与Nacos概述-2

微服务间消息传递 微服务是一种软件开发架构&#xff0c;它将一个大型应用程序拆分为一系列小型、独立的服务。每个服务都可以独立开发、部署和扩展&#xff0c;并通过轻量级的通信机制进行交互。 应用开发 common模块中包含服务提供者和服务消费者共享的内容 provider模块是…...

解决MySQL与Redis缓存一致性的问题

背景 考试系统中&#xff0c;教师会在后台发布一场考试&#xff0c;考试会存储在MySQL和Redis里面&#xff0c;考试有时候是会出错的&#xff0c;我们需要后台修改&#xff0c;如果多个教师在后台并发修改&#xff08;概率不大&#xff09;&#xff0c;可能会出现数据库缓存不…...

王道机组难题分析

第四章 指令系统 大端方式&#xff1a;就是高地址存放高位&#xff0c; LSB的意思是&#xff1a;全称为Least Significant Bit&#xff0c;在二进制数中意为最低有效位 MSB的意思是&#xff1a;全称为Most Significant Bit&#xff0c;在二进制数中属于最高有效位 操作数可以理…...

数学建模(一)前继概念

课程推荐&#xff1a;数学建模老哥_哔哩哔哩_bilibili 目录 一、什么是数学建模&#xff1f; 二、数学建模的一般步骤 三、数学建模赛题类型 1.预测型 2. 评价类 3.机理分析类 4. 优化类 一、什么是数学建模&#xff1f; 数学建模是利用数学方法解决实际问题的一种实践。…...

C# 随机法求解线性规划问题 蒙特卡洛

线性规划问题: max3x12x2 x12x2<5 2x1x2<4 4x13x2<9 x1>0 x2>0 正确的结果:x11.5; x21, max z6.5 Random random1 new Random(DateTime.Now.Millisecond);Random random2 new Random(DateTime.Now.Millisecond*DateTime.Now.Millisecond);double max-9999,x1…...

nginx文档合集

1、nginx documentation 2、14个Nginx的核心功能点&#xff0c;建议收藏&#xff01; 3、Nginx之负载均衡模块 ngx_http_upstream_module_途径日暮不赏丶的博客-CSDN博客 4、tomcat redis session共享 https://github.com/redisson/redisson/tree/master/redisson-tomcat...

什么是BFC?它有什么作用?如何创建BFC?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是BFC⭐ BFC的作用⭐ 创建BFC的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web…...

svn文章四:版本控制策略 - 穿越时光机:SVN版本控制进阶技巧

文章四&#xff1a;版本控制策略 - “穿越时光机&#xff1a;SVN版本控制进阶技巧” 概述&#xff1a;版本控制是SVN的核心功能。本文将深入研究SVN版本控制的进阶技巧&#xff0c;包括标签管理、历史查看、版本回退等&#xff0c;让您成为版本控制的高手。 1. 引言 版本控制…...

SpringBoot+Mybatis-Plus实现增删改查超详细步骤

目录 一、介绍 二、前期准备工作 &#xff08;一&#xff09; 创建springboot项目和创建数据库 三、项目配置 &#xff08;一&#xff09;pom.xl导入相关依赖 1.导入依赖 &#xff08;二&#xff09;yml文件中配置连接数据库 2.配置yml文件 四、代码的编写 数据库展…...

Qt应用开发(基础篇)——拆分器窗口 QSplitter QSplitterHandle

一、前言 QSplitter继承于QFrame&#xff0c;QFrame继承于QWidget&#xff0c;是Qt的一个部件容器工具类。 框架类QFrame介绍 QSplitter拆分器&#xff0c;用户通过拖动子部件之间的边界来控制子部件的大小&#xff0c;在应用开发中数据分模块展示、图片展示等场景下使用。 二、…...

屏幕尺寸单位 px、em、rem区别

1、px是屏幕设备物理上能显示出的最小的一个点&#xff0c;这个点不是固定宽度的&#xff0c;不同设备上点的长宽、比例有可能会不同。假设&#xff1a;1号显示器上1px宽1毫米&#xff0c;但2号显示器1px宽两毫米&#xff0c;那么定义一个div宽度为100px&#xff0c;1号显示器上…...

yo!这里是STL::list类简单模拟实现

目录 前言 重要接口实现 框架 默认成员函数 迭代器&#xff08;重点&#xff09; 1.引言 2.list迭代器类实现 3.list类中调用实现 增删查改 后记 前言 我们知道&#xff0c;stl中的vector对应数据结构中的顺序表&#xff0c;string类对应字符串&#xff0c;而今天要…...

小程序商城开发制作

当开发一个商城小程序时&#xff0c;费用是一个非常重要的考虑因素。然而&#xff0c;准确回答这个问题是有一定困难的&#xff0c;因为开发商城小程序的费用取决于多个因素。以下是一些可能影响价格的主要因素&#xff1a; 1. 功能需求&#xff1a;商城小程序的复杂程度和功能…...

并发编程面试题2

并发编程面试题2 一、AQS高频问题&#xff1a; 1.1 AQS是什么&#xff1f; AQS就是一个抽象队列同步器&#xff0c;abstract queued sychronizer&#xff0c;本质就是一个抽象类。 AQS中有一个核心属性state&#xff0c;其次还有一个双向链表以及一个单项链表。 首先state…...

关于eclipse导入部署具有增删改查的项目

目录 前言&#xff1a;当我们刚刚进入公司的第一步就是去部署当前公司的项目&#xff0c;本博客就是详细介绍怎么去部署当前公司的项目。 一&#xff0c;开发工具&#xff1a; 二&#xff0c;具体步骤&#xff1a; 2.1导入公司的项目 打开eclipse开发工具 2.2配置当前的环…...

c++日志工具之——log4cpp

1、log4cpp概述 Log4cpp是一个开源的C类库&#xff0c;它提供了C程序中使用日志和跟踪调试的功能&#xff0c;它的优点如下&#xff1a; 提供应用程序运行上下文&#xff0c;方便跟踪调试&#xff1b; 可扩展的、多种方式记录日志&#xff0c;包括命令行、文件、回卷文件、内…...

ES索引重建reindex详解

目录 一、使用场景 二、reindex介绍 三、使用手册 1、覆盖更新 2、创建丢失的文档并更新旧版本的文档 3、仅创建丢失的文档 4、冲突处理 5、source中添加查询条件 6、source中包含多个源索引 7、限制处理的记录数 8、从远程ES集群中重建索引 9、提取随机子集 10、…...

前沿分享-中距离射频取电

目前来看&#xff0c;微能源有四种技术路线&#xff0c;一是环境光采集、温差转换采集、无线射频采集和振动能量采集。 无线射频微能源是在通信设备通信过程中自然产生的&#xff0c;可以通过射频能量芯片实现无线射频取电&#xff0c;能瞬间大功率储电和安全驱动负载。 通过射…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...