跨域问题解决方案(三种)

Same Origin Policy同源策略(SOP)

具有相同的Origin,也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同,那么该资源就将被认为是从不同的Origin得来的,进而不被允许访问。

Cross-origin resource sharing跨域资源共享(CORS)

是一个W3C标准。允许浏览器向跨源(协议 + 域名 + 端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。它的通信过程,都是浏览器自动完成,不需要用户参与。

对于开发者来说,CORS通信与同源的AJAX/Fetch通信没有差别,代码完全一样。
浏览器一旦发现请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

  • 简单请求:只要在头信息增加一个Origin字段。是HEAD、GET、POST请求,并且HTTP的头信息不超出以下几种字段 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。反之,就是非简单请求。
  • 非简单请求:在正式通信之前,增加一次OPTIONS查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

实现CORS很简单,就是在服务端加一些响应头,并且这样做对前端来说是无感知的
在这里插入图片描述

如果在开发中,发现每次发起请求都是两条,一次OPTIONS,一次正常请求,注意是每次,那么就需要配置Access-Control-Max-Age,避免每次都发出预检请求。

方法一

全局配置,(很多旧版的WebMvcConfigurerAdapter被标记为过时Deprecated)

@Configuration
public class CorsConfig implements WebMvcConfigurer{@Overridepublic void addCorsMappings(CorsRegistry registry){registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}
}

方法二

基于过滤器方式,在response中写入这些响应头。

@WebFilter(filterName = "CorsFilter")
@Configuration
public class CorsFilter implements Filter{@Overridepublic void doFilter(ServletRequest req,ServletResponse res,FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse)res;response.setHeader("Access-Control-Allow-Origin","*");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");chain.doFilter(req, res);}
}

方法三

@CrossOrigin注解的方式
注解可以放在method、class等上面,类似RequestMapping,也就是说,整个controller下面的方法可以都受控制,也可以单个方法受控制

public class GoodsController{@CrossOrigin(origins = "http://localhost:4000")@GetMapping("goods-url")public Response queryGoodsWithGoodsUrl(@RequestParam String goodsUrl)throws Exception{}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jsoup | Document | HTML解析器

Jsoup 一、获取 <p>标签下的所有图片 一、获取 <p>标签下的所有图片 <p> <img style"max-width: 100%;" src"http://image.svipjf.cn/1678271098160-480_01.jpg"/><img src"http://image.svipjf.cn/1678271097994-480_02…

睿趣科技:现在开抖音小店还来得及吗

抖音&#xff0c;作为一款风靡全球的社交短视频应用&#xff0c;已经在短短几年内改变了人们的生活方式和商业模式。随着抖音上涌现出越来越多的网红和小店&#xff0c;许多人开始考虑是否还有机会在这个领域创业。那么&#xff0c;现在开抖音小店还来得及吗? 首先&#xff0c…

编程获取图像中的圆半径

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 即将推出EmguCV的教程&#xff0c;请大家还稍作等待。 之前网友咨询如何获得图像中圆形的半径&#xff0c;其中有两个十字作为标定…

(9.8-9.14)【大数据新闻速递】

加gzh“大数据食铁兽”&#xff0c;了解更多大数据快讯 【2023百度十大科技前沿发明】 近日&#xff0c;百度发布了“2023百度十大科技前沿发明”&#xff0c;包括“基于大模型的检索生成决策交互一体的智能系统”“基于大模型的端到端搜索技术”“飞桨端到端自适应的分布式训…

JL653—一个基于ARINC653的应用程序仿真调试工具

JL653是安装在PC机Windows操作系统上面的一层接插件&#xff0c;它能够真实地模拟ARINC653标准规定的功能性行为&#xff0c;从而可以供研发人员在PC机Windows环境下高效、快速的进行基于ARINC653的应用程序的开发、调试等。 JL653提供了ARINC 653 Part 1中要求的以下服务&…

使用cpolar配合Plex打造个人媒体站,畅享私人影音娱乐空间

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特别是各…

OGAI详解:AIStation调度平台如何实现大模型高效长时间持续训练

大模型是当前通用人工智能产业发展创新的核心技术&#xff0c;目前国内已发布的生成式AI模型超过了100个。面向以大模型为核心的生成式AI开发与应用场景&#xff0c;近日浪潮信息发布了大模型智算软件栈OGAI&#xff08;Open GenAI Infra&#xff09;——“元脑生智”&#xff…

华为云创新中心黑湖科技:将智能制造进行到底

编辑&#xff1a;阿冒 设计&#xff1a;沐由 一如去年&#xff0c;第二届828 B2B企业节从8月28日-9月15日期间&#xff0c;再一次成为广大企业界关注的焦点。 当前&#xff0c;数字技术已经被广泛被融入到产品、服务与流程当中&#xff0c;用以转变客户的业务成果&#xff0c;以…

ChatGPT在职业规划中的智能助手

随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;正逐渐成为我们日常生活的一部分。ChatGPT作为一种智能语言模型&#xff0c;可以在职业规划中充当智能助手的角色。本文将探讨ChatGPT在职业规划中的应用&#xff0c;以及它如何成为未来工作的智能伙伴。 首先…

基于SpringBoot+Vue实现的党校培训管理系统源代码+数据库

一、简介 项目简介&#xff1a; 基于微服务架构的党校培训管理系统&#xff0c; 完整代码下载地址&#xff1a;党校培训管理系统 大体总结&#xff1a; 前端使用Vue.js框架&#xff0c;UI组件库使用Element UI与Ant Design Vue&#xff0c;后端基于Spring Boot&#xff0c;使…

实现客户端pineline的思路

背景&#xff1a; redis集群不支持客户端的mget操作&#xff0c;但是业务上对这个redis集群的批量操作的需求一直都在&#xff0c;所以有各种客户端实现了各式各样的pineline实现,本文就记录下我们公司的实现方式 pineline实现思路 1.pineline要快 pineline之所以快是因为可…

【华为重启门】华为/荣耀手机一直自动重启原因解决方案(荣耀V10)

文章目录 【目前&#xff1a;系统回退安卓10、CPU贴了硅胶片。一天没重启了】1.问题描述2.分析原因3.解决方案4.实际操作 【目前&#xff1a;系统回退安卓10、CPU贴了硅胶片。一天没重启了】 1.问题描述 荣耀V10&#xff0c;莫名其妙的、无规律的死机重启。 一开始是重启后进…

Ubuntu22.04配置WiFi

Ubuntu22.04配置WiFi 注意&#xff1a;在/etc/netplan/​下的配置文件&#xff0c;格式一定要正确&#xff0c;否则用sudo netplan try​的时候会报错 一、查看无线网卡的名称 //choice-1 ls /sys/class/net//choice-2 ip a//choice-3 ifconfig -a‍ 二、修改配置文件 文件…

jmeter接口测试及详细步骤以及项目实战教程

在接口测试项目实战中&#xff0c;JMeter是一款非常强大和流行的自动化测试工具&#xff0c;它可以测试各种类型的应用程序&#xff0c;并通过采样和报告来识别性能瓶颈和API的问题。本文将为你提供一个基于实际项目的JMeter接口测试项目实战教程&#xff0c;指导你如何使用JMe…

分布式事务解决方案之2PC

分布式事务解决方案之2PC 前面已经学习了分布式事务的基础理论&#xff0c;以理论为基础&#xff0c;针对不同的分布式场景业界常见的解决方案有2PC、 TCC、可靠消息最终一致性、最大努力通知这几种。 什么是2PC 2PC即两阶段提交协议&#xff0c;是将整个事务流程分为两个阶段…

一种新的图像去噪方式:图像修补+斑点检测的预处理

灵感来源于我之前写的一篇博客&#xff1a;图像处理&#xff1a;基于cv2.inpaint()图像修补。 这种方式可以有效的去除白色的噪点&#xff0c;这里我们需要一张噪点的图像&#xff0c;你可以用下面的代码随机生成一张噪点图片&#xff1a; import cv2 import numpy as np # i…

软件设计模式系列之六——单例模式

1 模式的定义 单例模式&#xff08;Singleton Pattern&#xff09;是一种常见的创建型设计模式&#xff0c;其主要目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。这意味着无论何时何地&#xff0c;只要需要该类的实例&#xff0c;都会返回同一个…

vue2以ElementUI为例构建notify便捷精美提示

我们先引入一个 第三方UI库 这里 我们以elementUI为例 先引入依赖 npm install element-ui --save然后 在 main.js 入口文件中 引入一下 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.cssVue.use(ElementUI)然后 在组件中使用 this.$notify({…

如何使用 RunwayML 进行创意 AI 创作

标题&#xff1a;如何使用 RunwayML 进行创意 AI 创作 介绍 RunwayML 是一个基于浏览器的人工智能创作工具&#xff0c;可让用户使用各种 AI 功能来生成图像、视频、音乐、文字和其他创意内容。RunwayML 的功能包括&#xff1a; * 图像生成&#xff1a;使用生成式对抗网络 (…

每日刷题-6

目录 一、选择题 二、算法题 1.Fibonacci数列 2.合法括号序列判断 一、选择题 1、 解析&#xff1a;内联函数是一种可以提高函数执行效率的方法&#xff0c;它的原理是编译时在函数调用点直接展开函数体的代码&#xff0c;从而避免了函数调用的开销。 但是&#xff0c;内联函…