首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试从Github API + Spring Boot获取到Angular时出现CORS错误

CORS(跨域资源共享)错误通常是由于浏览器的同源策略引起的。当你尝试从一个域名访问另一个域名的资源时,浏览器会阻止这种行为,除非目标服务器明确允许这种跨域请求。

要解决这个问题,你需要在Spring Boot应用中配置CORS策略,允许来自Angular应用的跨域请求。以下是一些常见的解决方案:

方法一:全局CORS配置

你可以在Spring Boot应用中添加一个全局的CORS配置,允许特定的域名访问你的API。

  1. 创建一个配置类:
代码语言:javascript
复制
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:4200") // 允许Angular应用的域名
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}
  1. 在控制器中应用CORS配置(可选):

如果你只想在特定的控制器或方法上应用CORS配置,可以使用@CrossOrigin注解。

代码语言:javascript
复制
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyController {

    @CrossOrigin(origins = "http://localhost:4200")
    @GetMapping("/data")
    public String getData() {
        return "Hello, CORS!";
    }
}

方法二:使用Filter配置CORS

你也可以通过实现一个自定义的Filter来处理CORS。

  1. 创建一个CORS Filter:
代码语言:javascript
复制
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Content-Length, X-Requested-With");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}
  1. 注册Filter:

在Spring Boot应用中注册这个Filter。

代码语言:javascript
复制
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class FilterConfig {

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
        registrationBean.setFilter(new CorsFilter());
        registrationBean.addUrlPatterns("/*");
        return registrationBean;
    }
}

方法三:使用Spring Security配置CORS

如果你使用了Spring Security,可以在安全配置中添加CORS配置。

代码语言:javascript
复制
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable();
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:4200")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

注意事项

  • 确保你允许的域名(例如http://localhost:4200)与你的Angular应用的运行地址一致。
  • 如果你在生产环境中部署应用,记得将http://localhost:4200替换为你的实际域名。
  • 如果你使用的是HTTPS,确保所有涉及的域名都支持HTTPS。

通过以上方法之一配置CORS后,你应该能够解决从Angular应用访问Spring Boot API时的CORS错误。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CICD

创建一个 Spring Boot 应用程序 当我第一次开始使用 Jenkins X 时,我尝试导入现有项目。...保护你的 Spring Boot 应用程序并添加 Angular PWA 在过去的几个月里,我写了一系列有关使用 Ionic/Angular 和 Spring Boot 构建 PWA(渐进式 Web 应用程序...Boot API 和 Angular 组件的 Hitchhiker 指南 将你的 Spring Boot + Angular PWA 部署为一个 Artifact 这是该系列的最后一篇博客文章。...如果你单击此处链接并尝试登录,则可能会从 Okta 得到一个错误,指出重定向 URI 尚未列入白名单。...当我第一次尝试它时,我遇到以下错误: [21:51:08] E/launcher - unknown error: DevToolsActivePort file doesn't exist 此错误是由

7.7K70
  • Spring Boot + Vue 跨域配置(CORS)问题解决历程

    在使用 Spring Boot 和 Vue 开发前后端分离的项目时,跨域资源共享(CORS)问题是一个常见的挑战。...解决方案概述为了解决这个问题,我们需要在 Spring Boot 应用中配置 CORS。这个过程包括创建一个 CORS 配置类,并在 Spring Security 配置类中应用这个配置。3....试错过程3.1 初步尝试:简单的 CORS 配置我首先尝试在 Spring Boot 中添加一个简单的 CORS 配置类:import org.springframework.context.annotation.Bean...,在 Spring Boot 的 CORS 配置中,当 allowCredentials 设置为 true 时,allowedOrigins 不能包含特殊值 "*", 因为浏览器不允许在 Access-Control-Allow-Origin...通过以上配置,前端请求终于可以成功与后端通信,CORS 问题不再出现。4. 为什么要这样修改在 Spring Security 6 中,安全配置的方式有所变化。

    2.1K30

    IntelliJ IDEA 2022.2正式发布,支持Spring Boot 3和Spring 6

    Shorten command line 诚然,我特别喜欢软件追新,每次macOS、Spring Boot、Spring Framework、IntelliJ IDEA发布大、中型版本,我本人都第一时间升级...支持Spring 6和Spring Boot 3 Spring Boot 3已来到M4版本,举例正式版发布仅4个月左右。...同时,得益于苹果公开的Metal API,macOS上的渲染能力进一步得到提升。 什么是Metal API?...历经9面,终获美团外卖L8的offer ‍♀️Java架构师、Spring开源贡献者、CSDN博客之星年度Top 10、领域建模专家、写作大赛1/2届评委 高质量代码、规范践行者;DDD领域驱动深度实践...类型转换 Spring类型转换-框架设计的基石 07 【方向盘】-Spring static static关键字在Spring里的应用 08 【方向盘】-Cors跨域 关于跨域请求问题,本专栏足矣 09

    1.6K80

    Spring国际认证指南|了解如何使用 AngularJS 检索网页数据

    rest-service.guides.spring.io 上的服务运行CORS 指南中的代码,稍作修改:对/greeting端点开放访问,因为应用程序@CrossOrigin在没有域的情况下使用。...src="hello.js">复制 第一个脚本标签从内容交付网络 (CDN) 加载缩小的 AngularJS 库 ( angular.min.js ),这样您就不必下载 AngularJS...有关安装和使用 CLI 的更多信息,请参阅使用 Spring Boot 构建应用程序。...为了从 Spring Boot 的嵌入式 Tomcat 服务器提供静态内容,您还需要创建最少量的 Web 应用程序代码,以便 Spring Boot 知道启动 Tomcat。...Boot CLI 运行该应用程序: 春季运行 app.groovy 应用程序启动后,在浏览器中打开http://localhost:8080 ,您会在其中看到: 每次刷新页面时,ID 值都会增加。

    2.4K30

    SpringBoot学习五:错误处理、跨域支持

    1.SpringBoot错误产生 Spring Boot默认提供一个/error映射用来以合适的方式处理所有的错误,并将它注册为servlet容器中全局的错误页面。...当出现一个错误信息时,会产生一个具有详细错误、HTTP状态,异常信息的JSON相应。具体到页面上,会产生一个错误视图。 ?...Spring Boot 本身在处理异常时,也是当所有条件都不满足时,才会去找 /error 路径。 动态异常页面 动态异常页面可以使用jsp、thymeleaf,动态页面可以直接展示异常信息。...在前后端分离开发过程中,肯定会出现跨域问题,传统的JSONP可以使用GET方式请求,而CORS跨域是避开浏览器的同源策略。 从4.2版本开始,Spring MVC对CORS提供开箱即用的支持。...不用添加任何特殊配置,只需要在Spring Boot应用的controller方法上注解@CrossOrigin //在Controller上配置跨域 @CrossOrigin(origins = "localhost

    71231

    【方向盘】2021年JVM生态报告:Java 11使用率超Java 8

    前端框架最火的不是VUE 前端领域,全球使用最多的框架依旧是Angular,Vue 的使用率只有11%,国内人普遍使用,国外人还是首选Angular。...Spring框架在Java呈垄断态势 在Java的世界里,如果不在使用Spring Boot,就是在使用Spring MVC。...历经9面,终获美团外卖L8的offer ‍♀️Java架构师、Spring开源贡献者、CSDN博客之星年度Top 10、领域建模专家、写作大赛1/2届评委 高质量代码、规范践行者;DDD领域驱动深度实践...类型转换 Spring类型转换-框架设计的基石 07 【方向盘】-Spring static static关键字在Spring里的应用 08 【方向盘】-Cors跨域 关于跨域请求问题,本专栏足矣 09...、Spring Boot、Spring Cloud、Spring其它技术 17 【方向盘】-Spring技术栈新特性 每个Javaer,都需要有扎实的基本功 … … … 99 源代码库 大多数专栏均配有源代码

    1.3K20

    2021 最新版 Spring Boot 速记教程

    “引用:当一个资源从与该资源本身所在服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求 ” 详细可以参考这篇文章-springboot系列文章之实现跨域请求(CORS),这里只是记录一下如何使用...Boot learn project") .contact(new Contact("JingQ", "https://github.com...而且单一整合很容易,但多个依赖会出现想不到的错误,所以在解决环境问题时遇到很多坑,想要使用基础的脚手架,可以尝试跑我上传的项目。...Boot(07)——ConfigurationProperties介绍 4、springboot系列文章之实现跨域请求(CORS) 5、Spring Data Redis(一)–解析RedisTemplate...Spring Boot 的现代化社区(论坛/问答/社交网络/博客) 13K点赞都基于 Vue+Spring 前后端分离管理系统ELAdmin,大爱想接私活时薪再翻一倍,建议根据这几个开源的SpringBoot

    81330

    Spring Boot 3.0.0正式发布,Banner不再支持图片&增强可观测性

    ,弃用从spring.factories加载自动配置类 北京时间2022-05-19 Spring Boot 2.6.0正式发布,循环引用终于被禁 北京时间2021-11-17 Spring Boot...这个API的设计是降低使用门槛,希望用户使用单一API,就能从中获取到多种信息:metrics、tracing、logging 笔者窥探了一下Spring Boot针对Micrometer源代码级别的变化...譬如,@GetMapping("/api/demo")之前版本即可匹配/api/demo亦可匹配上/api/demo/,自Spring Boot 3.0.0(其实是Spring Framework 6)...因此若你从老项目里升级过来,那么请务必做好兼容,方式有两种: 局部式:将需要兼容的接口URL显示的写出多个,如:@GetMapping({"/api/demo", "/api/demo/"}) 全局式:...@SpringBootTest支持“调用”main方法 我们的Spring Boot应用入口是main方法,而@SpringBootTest测试时它并没有执行我main方法,而是自己启的容器。

    1.7K40

    Spring Cloud Gateway实战之一:初探

    的初体验 关于Spring Cloud Gateway 这是一个基于Spring技术栈构建的API网关,涉及到:Spring5、Spring Boot 2、Reactor等,目标是为项目提供简单高效的API...HELLO_PREFIX = "Hello World"; } 创建web应用,作为服务提供方 现在创建名为provider-hello的web应用,这是个极其普通的web应用,提供几个http接口服务,咱们在尝试...Spring Cloud Gateway的基本功能时,都会将请求路由到provider-hello上来 provider-hello是个普通的springboot应用,会在nacos进行注册,其pom.xml...log.info("response in junit test :\n" + responseString); } } 执行单元测试(此时nacos是否启动无所谓,只是不启动的话控制台会有一些错误信息...; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource

    47940

    Nginx 轻松搞定跨域问题!

    通过错误信息可以很清晰的定位到错误(注意看标红部分)priflight说明是个预请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。...情况4: 比较早期的API可能只用到了POST和GET请求,而Access-Control-Allow-Methods这个请求响应头跨域默认只支持POST和GET,当出现其他请求类型时候,同样会出现跨域异常...比如,我这里将请求的API接口请求方式从原来的GET改成PUT,在发起一次试试。...Spring Cloud 爆高危漏洞,赶紧修复! 2021 年发生的 10 件技术大事!! 23 种设计模式实战(很全) Spring Boot 保护敏感配置的 4 种方法! 再见单身狗!...Spring Boot 3.0 M1 发布,正式弃用 Java 8 Spring Boot 学习笔记,这个太全了! 关注Java技术栈看更多干货 获取 Spring Boot 实战笔记!

    5.2K30

    猫头虎分享 AIGC 时代:新项目如何快速基于 IDEA 和 ChatGPT 搞定 Spring Boot 3 + Vue 3 全栈开发环境搭建

    使用 IDEA 快速创建 Spring Boot 项目 首先打开 IntelliJ IDEA,并创建一个新的 Spring Boot 项目。...常见问题排查 CORS 错误:检查后端 CORS 配置是否正确,特别是 allowedOrigins 的值。 Axios 网络请求错误:确保 Axios 的 baseURL 与后端实际地址一致。...示例提示: “生成一个 Spring Boot 的登录 API,包括接收用户名和密码,并返回一个 JSON 响应。”...调试与问题解决 如果你在运行中遇到错误,比如 CORS 问题、NullPointerException 等,ChatGPT 可以帮助你快速排查并提供修复方法。 3....八、常见问题与解决方案 问题 1:启动后端时出现数据库连接失败 解决方案: 确保 MySQL 服务已启动,并检查 application.yml 中的数据库配置。

    13910
    领券