SpringBoot3 CORS跨域访问

这篇具有很好参考价值的文章主要介绍了SpringBoot3 CORS跨域访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Credentials

​编辑

问题一

问题二

问题三

解决方法一 CrossOrigin,最优的方法

 解决方法二 通过Filter 设置HTTP

解决方法三 通过实现WebMvcConfigurer设置HTTP

解决方法四 通过CorsFilter

Access-Control-Allow-Headers authorization 问题

解决办法,服务器添加authorization

HTTP 协议,需要认真的学习每个细节。

allowCredentials(true)  和 allowed-origins: "*" 不能同时配置

allowCredentials(true)  和 allowed-origins: "http://127.0.0.1:5500" 匹配

Credentials

Credentials告诉brower 带上Cookie信息,这时Allow-Origin不能是wildcard(*)。

因为* 可能造成网站的不安全,不会把Cookie给任何请求,所以Allow-Origin必须有值。

Credentials=false时,Set-Cookie不会生效。

SpringBoot3 CORS跨域访问

问题一

No 'Access-Control-Allow-Origin',此错误信息不准确,配置的信息里任何一项有错误,都会报如下信息。如果addmapping("/rest")会报这个错误,准确的是addmapping("/rest/**")。

Access to fetch at 'http://localhost:8888/rest/order/1' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

问题二

"When allowCredentials is true, allowedOrigins cannot contain the special value \"*\" since that cannot be set on the \"Access-Control-Allow-Origin\" response header. To allow credentials to a set of origins, list them explicitly or consider using \"allowedOriginPatterns\" instead."

 //.allowCredentials(true)

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		
		registry.addMapping("/**")
        .allowedOrigins("http://localhost:5500")
        //.allowCredentials(true)
        .allowedMethods(yml.WEB_CORS_ALLOWED_METHODS)
        .maxAge(yml.WEB_CORS_MAX_AGE)
        .allowedHeaders(yml.WEB_CORS_EXPOSED_HEADERS)
        .exposedHeaders(yml.WEB_CORS_EXPOSED_HEADERS);		
		WebMvcConfigurer.super.addCorsMappings(registry);
	}

问题三

请求过程中出现异常,导致没有正常的返回,Response的Header没有数据,也会出现CORS,

需要让请求正常返回。 

SpringBoot3 CORS跨域访问

解决方法一 CrossOrigin,最优的方法

最简单实现跨域访问的方法是通过注释@CrossOrigin。

	@CrossOrigin
	@GetMapping("/order/{id}")
	public OrderVO getOrder(@PathVariable("id") Long id,
							HttpServletRequest request,
							HttpServletResponse response) {
}

 解决方法二 通过Filter 设置HTTP

@Component
public class WebCommonFilter implements Filter{

	/**
	 *  handle CORS question by {@link HttpServletRequest} 
& {@link HttpServletResponse} ,
	 *  This method can resolve any CORS by setting 
Access-Control-Allow-Origin = true 
	 *  or Access-Control-Allow-Origin = req.getHeader("Origin").
	 */
	@Override
	public void doFilter(ServletRequest request, 
						ServletResponse response, 
						FilterChain chain)throws IOException, ServletException {
		
	        HttpServletRequest req = (HttpServletRequest) request;
	        String curOrigin = req.getHeader("Origin");
	        HttpServletResponse res = (HttpServletResponse) response;
	        res.setHeader("Access-Control-Allow-Origin", 
            curOrigin == null ? "true" : curOrigin);
	        res.setHeader("Access-Control-Allow-Credentials", "true");
	        res.setHeader("Access-Control-Allow-Methods", "POST, 
            GET, OPTIONS, DELETE, HEAD");
	        res.setHeader("Access-Control-Max-Age", "3600");
	        res.setHeader("Access-Control-Allow-Headers", 
            "access-control-allow-origin, x-custom-header,authority, 
            content-type, version-info, X-Requested-With");
	        res.setContentType("application/json;charset=UTF-8");
	        chain.doFilter(req, res);
	}
}

解决方法三 通过实现WebMvcConfigurer设置HTTP

最灵活的实现方式,推荐在项目中使用这种方式。

@Configuration
public class WebBaseMvcConfigurer implements WebMvcConfigurer {

	@Autowired
	WebConfigurerFromYML yml;
	
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping(yml.mapping)
                .allowedOrigins(yml.WEB_CORS_ALLOWED_ORIGINS)
                .allowCredentials(true)
                .allowedMethods(yml.WEB_CORS_ALLOWED_METHODS)
                .maxAge(yml.WEB_CORS_MAX_AGE);
//                .allowedHeaders(yml.WEB_CORS_ALLOWED_HEADERS);
//                .exposedHeaders(yml.WEB_CORS_EXPOSED_HEADERS);
    }
}
web:
  cors:
    mapping: "/rest/**"
    allowed-origins: "http://127.0.0.1:5500"
    allowed-methods: "POST,GET,OPTIONS,DELETE,HEAD"
    max-age: 3600
    allowed-headers: "access-control-allow-origin"
    exposed-headers: "X-Get-Header"   

解决方法四 通过CorsFilter

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("http://localhost:8080/");
        //是否发送 Cookie
        config.setAllowCredentials(true);
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource 
= new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

Access-Control-Allow-Headers authorization 问题

Access-Control-Allow-Headers 允许的参数没有包含客户端请求的参数,如authorization。然后会出现CORS跨域问题。

SpringBoot3 CORS跨域访问

解决办法,服务器添加authorization

SpringBoot3 CORS跨域访问文章来源地址https://www.toymoban.com/news/detail-470200.html

到了这里,关于SpringBoot3 CORS跨域访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python flask跨域支持(Access-Control-Allow-Origin(CORS)跨域资源共享(访问控制允许来源:允许指定的来源进行跨域请求)浏览器同源策略、OPTIONS预检请求

    浏览器的同源策略(Same-Origin Policy)限制了跨域请求,如果不进行特殊处理,跨域请求将被浏览器拦截。 接口支持跨域能够允许浏览器跨域请求不被浏览器拦截。 下面是跨域请求的一些影响、优点和缺点: 优点 允许不同域名下的应用程序进行数据交互,提高了系统的灵活性

    2024年02月11日
    浏览(41)
  • 【SpringBoot3】--03.数据访问、基础特性(外部化和内部外配置、整合JUnit)

    学习视频: 尚硅谷SpringBoot3视频 SpringBoot 整合 Spring 、 SpringMVC 、 MyBatis 进行 数据访问场景 开发 勾选之后会导入以下包 安装 MyBatisX 插件,帮我们生成Mapper接口的xml文件即可 在接口处 : Alt + 回车 必须把mapper的xml文件映射位置在配置文件定义! 而驼峰命名转换建议也开启 编

    2024年02月16日
    浏览(38)
  • SpringBoot解决跨域访问的问题

    说到跨域访问,必须先解释一个名词:同源策略。所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同、Host(ip)相同、端口相同的条件,否则访问将被禁止,该访问也就被称为跨域访问。 虽然跨域访问被禁止之后,可以在一定程度上提高了应用

    2024年02月09日
    浏览(39)
  • springboot之跨域访问cros,@CrossOrigin注解

    目录 一、url 二、同源的含义 三、浏览器的同源策略 四、跨域访问  1、什么是跨域访问  2、为什么前后端分离项目会产生跨域问题  3、跨域过程分析 五、cros解决跨域访问 六、@CrossOrigin注解    url (uniform resource locator:统一资源定位符)     协议://域名:端口号/资源路径

    2024年01月22日
    浏览(49)
  • CORS就是跨域吗?

    跨域的英文是:Cross-Origin。 Origin  中文含义为:起源,源头,出生地。 在跨域中,\\\"域\\\"指的是一个 Web 资源(比如网页、脚本、图片等)的 源头 。 包括该资源的 协议 、 主机名 、 端口号 。 在 同源策略 中,如果两个资源的域相同,则它们属于同一域,可以自由进行交互和

    2024年02月20日
    浏览(27)
  • Chrome 跨域问题CORS 分析

    先叠个甲,有错误,望沟通指正! has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 类似上面的报错 ,就是出现了跨域限制访问问题 同源策略(Same-Origin Policy),这个是浏览器的一个策略.也就

    2024年03月18日
    浏览(33)
  • flask解决cors跨域请求

    CORS的全称是Cross-Origin Resource Sharing  ,有w3c组织制定的,现在这个规范,已经被大多数浏览器支持,处理跨域的需求。 CORS需要后端应用进行配置,因此,这是一种后端跨域的配置方式,这种方式很容易理解,一个陌生的请求来访问你的服务器,自然需要进行授权。。。 (关

    2024年02月12日
    浏览(56)
  • 前端跨域解决方案——CORS

    CORS(跨来源资源共享)是一种用于解决跨域问题的方案。 CORS(跨来源资源共享)是一种安全机制,用于在浏览器和服务器之间传递数据时,限制来自不同域名的请求。在前端开发中,当通过 XMLHttpRequest(XHR)或 Fetch API 发送跨域请求时,如果服务器没有正确配置 CORS,浏览器

    2023年04月27日
    浏览(50)
  • SpringBoot解决前后端分离跨域问题:状态码403拒绝访问

    最近在写和同学一起做一个前后端分离的项目,今日开始对接口准备进行 登录注册 的时候发现前端在发起请求后,抓包发现后端返回了一个 403 的错误,解决了很久发现是【跨域问题】,第一次遇到,便作此记录✍ 在后端服务器启动后,前端页面也起了起来,然后点击这个

    2024年02月03日
    浏览(39)
  • Django 解决CORS跨域问题的方法

    Cross-Origin Resource Sharing(CORS) 跨域问题,在前后端后离项目, selenium , playweight 自动化测试代码中经常遇到。 而使用 python request, curl, postman 等非浏览器代码发送请求时则不存在这个问题。 浏览器采用了同源保护策略,为了防御恶意攻击,会检查Request消息与Response消息的域

    2024年03月23日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包