跨域的五种解决方案详解

article/2025/9/20 6:54:42

1.跨域解决方案一:cors技术

CORS :全称cross origin resource share (资源共享)

工作原理: 服务器 在返回响应报文的时候,在响应头中 设置一个允许的header

res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)

CORS :全称cross origin resource share (资源共享)

服务器 在返回响应报文的时候,在响应头中 设置一个允许的header

//服务器设置CORS,允许浏览器跨域
res.setHeader('Access-Control-Allow-Origin', '*')

1.png

2-express使用中间件cors

官网传送门:https://www.expressjs.com.cn/resources/middleware.html

xpress有一个自带的中间件cors,它的作用是自动给每一个res设置默认请求头

这样就不用我们自己每一个接口都要设置一次了

2.png
仅需两步即可潇洒搞定!

//1.下包 
$ npm install cors
//2配置中间件 
var cors = require('cors') 
app.use(cors()

cors中间件底层原理如下

app.use((req, res, next) => {//任何请求都会进入这个use中间件 
res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头 
next()//执行下一个中间件  })

2.跨域解决方案二:原生jsonp

通过动态创建script标签,通过script标签的src,向一个不同源的接口发送一个get请求

3.png
src属性发送请求时,在参数中额外携带一个callback的参数,参数值是一个在页面中预先定于好的函数名

callback属性值:预先定义的函数名,这个函数必须要在script标签之前定义

服务器接收到请求之后,获取callback的参数值

服务器将要响应的数据拼接成 函数调用格式,通过传参的方式将响应数据返回给浏览器

4.png

注意:JSONP只支持get请求,不支持post

3.跨域解决方案三: jQuery中的jsonp

只需要一行代码

dataType:'jsonp'

底层原理与原生一致,设置dataType为jsonp,jq会自动动态帮我们创建一个script标签,将url放到src属性中

细节注意点:jq使用jsonp不需要自己设置callback,jq会自动帮我们发送callback参数,参数值就是jq的success回调函数

5.png
4.跨域解决方案四:谷歌浏览器设置跨域

跨域是浏览器的一个安全限制,我们可以通过修改一些设置,让被设置的浏览器没有这个同源的限制,自然可以实现跨域

5.区别

最后的最后总结一下SONP与CORS的区别

1.CORS:

服务器返回响应头,前端无需任何处理

简单快捷,支持所有请求方式

2.JSONP

浏览器:自定义响应回调函数,使用script标签的src请求

利用浏览器的src属性没有跨域这一限制特点

服务器:接收callback参数,返回函数调用

处理复杂,并且只支持get请求

原因:get请求参数直接在url后面拼接,而post请求参数是放在请求体中

未完待续…


http://chatgpt.dhexx.cn/article/tLmqcoOl.shtml

相关文章

Java中parseInt用法(double类似)

1.将字符直接解析为十进制数进行输出 2.如果方法有两个参数, 使用第二个参数指定的基数,将字符串参数解析为有符号的10进制整数。(所谓指定基数:就是将字符串指定为2,8,16等进制数,然后用解析为…

javascript:parseInt用法,特殊用法,进制转换

parseInt( string,radix ) 一、功能: 除了我们众所周知的字符串转换为整数以外,还涉及到进制问题: 将 [ 指定进制的 ] 字符串转换为十进制整数型 用汉语翻一下这个方法: 二、参数: 1、string: 要解析的字符串&a…

前端JS字符串转数值 Number和parseInt用法

Number() 只包含数值的字符串字符串为空则为0 parseInt() 字符串不能为空字符串第一个必须为数值从第一个数值开始取,到最后一个连续数值结束

java中Integer.parseInt用法详细分析(全)

目录 前言函数讲解 前言 将数字字符串转化成原生整型数据 属于java.lang.Integer 是原生类型整型的包裹类 函数讲解 1.parseInt(String s) 将字符串s转换为十进制的数字,默认为十进制 public static void main(String[] args) {int numInteger.parseInt("10…

parseInt用法

MDN: 从给定的字符串中解析出的一个整数。 代码&#xff1a; <script>var aparseInt("100px");console.log("a:"a" type:"typeof(a));</script>效果&#xff1a;

parseInt鲜为人知的用法

用法一&#xff1a;将小数转换成整数 var float_num 3.14;float_num parseInt(float_num);console.log(float_num);输出结果&#xff1a; 用法二&#xff1a;以数字开头的字符变量转换成整数 var str_num 3.14string;str_num parseInt(str_num);console.log(str_num);输出…

javax.servlet.http.HttpServletRequest错误

javax.servlet.http.HttpServletRequest错误 javax这个api出错 问题分析&#xff1a;javax.api找不到。 解决方案&#xff1a; 方案一&#xff1a; 可以再maven的pom.xml文件中导入方案二&#xff1a; idea没有导入tomcat下的lib目录下的api,我们手动导入就可以。 步骤如下&a…

java: 程序包javax.validation不存在

之前&#xff0c;有位同学反馈说&#xff0c;在运行newbee-mall-api项目时遇到了下面这个问题&#xff0c;无法正常编译项目&#xff0c;错误截图如下&#xff1a; 看了一下应该是NotEmpty、Valid这几个验证注解引起的&#xff0c;因为这几个注解都是定义在javax.validation包…

maven install 时提示程序包javax.crypto不存在

maven install 时提示程序包javax.crypto不存在 大家好&#xff0c;我是酷酷的韩~ 一.maven install报错原因 javax.crypto是在jdk的jre\lib目录下的,需要在编译的时候引入jdk的rt.jar包和jce.jar包。 二.解决办法 <build><plugins><plugin><groupId&…

javax.crypto.AEADBadTagException: Tag mismatch 的解决办法

问题概述 关于这个问题&#xff0c;博主是在微信支付开发与配置过程中遇到的&#xff0c;在使用工具 “ CertificateDownloader-1.1.jar ” 生成平台证书时&#xff0c;报&#xff1a;“ javax.crypto.AEADBadTagException: Tag mismatch! ” ,提示标签不匹配&#xff0c; 如下…

java javax.servlet_java.lang.NoClassDefFoundError: javax/servlet/ServletOutputStream 报错解决

报错的方法栈 在ssm中写了一个 utils 类&#xff0c;定义了main方法测试和查看工具实际数据 运行main方法时报错了&#xff0c;之前都没错&#xff0c;莫名其妙报了错 java.lang.NoClassDefFoundError: javax/servlet/ServletOutputStream at java.lang.Class.getDeclaredMetho…

javax 和hibernate 的NotBlank

问题&#xff1a;hibernate版本在5 的时候&#xff0c;如果你用了 import javax.validation.constraints.NotBlank; 在校验的时会报错 HV000030: No validator could be found for constraint javax.validation.constraints.NotBlank validating type java.lang.String. Chec…

java和javax的区别

java与javax的区别分析 Java是一种受C语言影响的编程语言。Java和Javax本质上是与Java编程语言的上下文一起使用的包。实际上Java和Javax没有区别。这只是不同的名字。Java是一种编程语言&#xff0c;受到C语言的影响。它源自C和C的大部分语法&#xff0c;但是它的低级别设施比…

使用 javax.mail 发送邮件

发邮件在 java web 项目中是一个常用功能&#xff0c;之前在项目中刚好用到了邮件发送功能&#xff0c;现在用博客进行记录&#xff0c;方便以后查阅。这篇文章简单介绍使用 javax.mail 发送邮件的步骤&#xff0c;并提供封装好的邮件发送方法&#xff0c;希望对自己和别人有用…

javax.validation校验整理

文章目录 前言一、非空校验二、长度校验三、数值校验四、正则校验五、自定义校验注解六、校验组 前言 javax.validation校验总是混淆&#xff0c;特此整理。如有错误&#xff0c;请不吝指正。 一、非空校验 序号注解解释适用场景1NotNull不能为null&#xff0c;但可以为empt…

Java API学习(二)javax包

在线中文api&#xff1a;http://tool.oschina.net/apidocs/apidoc?apijdk-zh Java版本&#xff1a;1.8 Android版本&#xff1a;23 java的api有java和javax2个包 java和javax都是Java的API包&#xff0c;java是核心包&#xff0c;javax的x是extension的意思&#xff0c;也就…

知识图谱和图神经网络

知识图谱 理论知识知识图谱嵌入模型TransEDistMult 知识图谱的抽取与构建知识图谱工程知识抽取——实体识别与分类知识抽取——实体关系抽取与属性补全 知识图谱的推理常见知识图谱推理方法分类 图表示学习随机游走同构图算法异构图算法 图神经网络系列监督学习或半监督学习模型…

图神经网络和常见的神经网络的区别

GNN-Graph Neural Networks 0 前言1 图神经网络和以往深度学习的区别2 图神经网络的特点 参考知乎&#xff1a;https://zhuanlan.zhihu.com/p/136521625 0 前言 图神经网络有很多比较好的综述&#xff1a; 1、Graph Neural Networks: A Review of Methods and Applications.…

图神经网络(Graph Neural Networks)

图神经网络&#xff08;Graph Neural Network&#xff09;在社交网络、推荐系统、知识图谱上的效果初见端倪&#xff0c;成为近2年大热的一个研究热点。然而&#xff0c;什么是图神经网络&#xff1f;图和神经网络为什么要关联&#xff1f;怎么关联&#xff1f; 本文简单介绍GN…

图神经网络综述

文章目录 1 简介 1.1 GNN简史1.2 GNN的相关研究1.3 GNN vs 网络嵌入1.4 文章的创新性2 基本的图概念的定义3 GNN分类和框架 3.1 GNNs分类3.2 框架4 图卷积网络 4.1 基于图谱的GCN 4.1.1 图信号处理4.1.2 基于谱的GCN方法4.1.3 总结4.2 基于空间的GCN 4.2.1 基于循环的空间GCNs…