跨域的五种解决方案详解

2023-05-16

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请求参数是放在请求体中

未完待续…

最后

深知大多数初中级Java工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则近万的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《Java开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

小编已加密:aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因,我们把网站通过base64编码了,大家可以通过base64解码把网址获取下来。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

跨域的五种解决方案详解 的相关文章

随机推荐

  • Debian远程控制SSH和putty

    转自 http blog sina com cn s blog 6ffafb910100omeu html SSH是一种在远程传输数据时可加密的传输手段 作为远程控制的首选服务 xff0c 给数据的传输安全带来的很大的好处 在debian
  • K8S异常之Harbor证书过期处理(完整版流程)

    1 背景 如图所示 xff0c 在登录harbor仓库时 xff0c 提示证书已经过期 2 更新证书 2 1 停止harbor docker compose down span class token punctuation span ro
  • jar命令之替换已有jar包依赖库的版本

    背景 由于项目使用的是nacos1 1 4 xff0c 其依赖的fastjson的版本为1 2 58 xff0c 包含了AVD 2022 1243027和AVD 2022 1243027的 fastjson lt 61 1 2 80 反序列
  • Java项目热部署方案之IDEA-HotSwapAgent和DCEVM大法

    一 环境准备 HotSwapAgent xff08 http hotswapagent org xff09 依赖 DCEVM 而 DCEVM要求jdk版本必须对应 xff0c 如果你用的 jdk1 8 xff0c 首先需要确认安装的是jdk
  • 使用rclone将本机文件或文件夹导入minIO

    一 背景 minio大量文件上传 xff0c 通过console xff0c web端控制台上传的话是可以的 xff0c 但是文件量太大 xff0c 效率很低 xff0c 就想办法上传服务器 xff0c 然后读取服务器文件的方式进行 二 过
  • 记录一次docker容器引起的时间相差8h的问题

    一 背景 系统打印日志时间小8h xff0c 部分插入mysql的日期却大8h xff0c 简直诡异 测试时间是上午10 05 经过排查 xff0c mysql设置的时区 xff0c 链接url设置的时区都是ok的 而且有其他服务时间正常
  • c++常见面试题30道

    转自 xff1a http blog csdn net shihui512 article details 9092439 xff1b 1 new delete malloc free 关系 delete会调用对象的析构函数 和 new 对
  • __attribute__ 机制详解

    attribute 语法的来源 GNU C 的一大特色就是 attribute 机制 attribute 可以设置函数属性 xff08 Function Attribute xff09 变量属性 xff08 Variable Attribu
  • 进程和线程的理解

    一 进程和线程的概念 xff08 一句话概述 xff09 进程 xff1a 我们运行的程序通常会对应一个或多个进程 xff0c 进程是操作系统分配内存的基本单位 线程 xff1a 一个进程通常会包含一个或多个线程 xff0c 线程是操作系统
  • ubuntu中sudo apt-get install 出现 failed to fetch

    在ubuntu中 安装samba时 xff08 sudo apt get install samba xff09 出现 failed to fetch 通过以下方式成功解决了 xff1a 我直接更新了下就解决了 通过sudo apt get
  • Docker删除镜像和容器

    一 删除容器 首先需要停止所有的容器 xff08 只停止单个时把后面的变量改为image id即可 xff09 docker stop docker ps a q 删除所有的容器 xff08 只删除单个时把后面的变量改为image id即可
  • 【读书】只读经典

    本文摘自豆瓣上 八百步 的收集的资料 xff1a http book douban com review 5289501 Ch 1 xff1a 管理 1 弗雷德里克 温斯洛 泰勒著 xff0c 科学管理的基本原理 xff0c 1911年出版
  • 卸载Docker

    一 准备工作 xff1a 1 杀死docker有关的容器 xff1a docker kill docker ps a q 2 删除所有docker容器 xff1a docker rm docker ps a q 3 删除所有docker镜像
  • IDEA2020启动Tomcat控制台中文乱码解决

    IDEA2020启动Tomcat控制台中文乱码解决 1 中文乱码原因 基本上大家安装的windows系统本地语言都是选择中文 xff08 不会有人选择英文吧 xff1f 不会吧 xff1f 不会吧 xff1f xff09 xff0c 也就是
  • MyEclipse配置Tomcat 7

    1 打开步骤 xff1a 窗口 gt 首选项 gt MyEclipse gt Servers gt Tomcat gt Tomcat 7 x 2 配置自己本地的Tomcat 7版本 3 关闭MyEclipse自带的Tomcat服务器 4 启
  • mysql之模糊查询的方法

    Mysql模糊查询正常情况下在数据量小的时候 xff0c 速度还是可以的 xff0c 但是不容易看出查询的效率 xff0c 在数据量达到百万级 xff0c 千万级的甚至亿级时mysql查询的效率是很关键的 xff0c 也是很重要的 一 一般
  • Spring Cloud限流详解

    Spring Cloud限流详解 Spring Cloud Spring Cloud 2017 12 01 在高并发的应用中 xff0c 限流往往是一个绕不开的话题 本文详细探讨在Spring Cloud中如何实现限流 在Zuul上实现限流
  • springboot启动注解

    为什么springboot不需要配置文件就可以启动成功 springboot入口SpringBootApplication是一个启动类 xff0c 主要的注解是以下的三个 xff1a 1 SpringBootConfiguration是一个
  • 如何释放linux的内存

    你们知道怎么释放linux的内存吗不知道的话跟着学习啦小编一起来学习怎么释放linux的内存 释放linux的内存的步骤 Linux下操作频繁时 xff0c 物理内存会被快速用完 xff0c 当操作结束后 xff0c 物理内存没有被正常的释
  • 跨域的五种解决方案详解

    1 跨域解决方案一 cors技术 CORS 全称cross origin resource share xff08 资源共享 xff09 工作原理 xff1a 服务器 在返回响应报文的时候 xff0c 在响应头中 设置一个允许的header