다음과 같은 오류 메시지가 나타날 수 있습니다.
CORS 정책에 의해 차단됨: 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다
이 오류는 Access-Control-Allow-Origin 헤더가 리소스에 없기 때문에 특정 주소에 대한 요청이 CORS 프로토콜에 의해 차단되었음을 나타냅니다.
교차 출처 문제의 근본 원인은 보안상의 이유로 브라우저가 현재 사이트 외부의 리소스에 대한 액세스를 제한한다는 것입니다.
예를 들어, 특정 페이지가 있는 http://127.0.0.1:8080/에 호스팅된 웹사이트를 생각해 보세요. 동일한 사이트의 리소스에 액세스하는 경우에는 제한이 없습니다. 하지만 다른 사이트(예: http://127.0.0.1:8081)의 리소스에 액세스하려고 하면 브라우저가 요청을 차단합니다.
참고: 프로토콜, 도메인 및 포트는 "동일 출처" 정의의 일부로 간주됩니다.
img 및 script 태그와 같은 src 속성이 있는 요소에는 이 제한이 적용되지 않습니다.
역사적으로 프런트엔드와 백엔드가 분리되지 않았을 때 페이지와 요청 인터페이스는 동일한 도메인과 포트에 존재했습니다. 그러면 브라우저는 한 도메인에서 호스팅되는 페이지의 요청을 허용하여 동일한 도메인의 리소스를 요청할 수 있습니다.
예를 들어 http://127.0.0.1:8080/index.html은 http://127.0.0.1:8080/a/b/c/userLit를 자유롭게 요청할 수 있습니다.
요즘에는 프런트엔드와 백엔드가 서로 다른 애플리케이션으로 분리되어 있으므로 이는 허용되지 않으며 CORS 문제를 유발합니다.
오리진(또는 소스)은 프로토콜, 도메인, 포트번호로 구성됩니다.
URL은 프로토콜, 도메인, 포트, 경로로 구성됩니다. 프로토콜, 도메인, 포트가 모두 동일한 경우 두 URL은 "동일 출처"로 간주됩니다. 이 세 가지 요소 중 어느 하나라도 차이가 있으면 교차 출처 요청이 됩니다.
https://www.baidu.com/index.html에 대한 출처 간 비교를 고려하세요.
URL | Cross-Origin | Reason |
---|---|---|
https://www.baidu.com/more/index.html | No | Same protocol, domain, and port |
https://map.baidu.com/ | Yes | Different domain |
http://www.baidu.com/index.html | Yes | Different protocol |
https://www.baidu.com:81/index.html | Yes | Different port |
동일 출처 정책은 기본적인 브라우저 보안 기능입니다. 그렇지 않으면 브라우저의 정상적인 기능이 위험해질 수 있습니다. 웹 아키텍처는 이 정책에 크게 의존하며 브라우저는 보안을 보장하기 위해 이를 구현합니다.
동일 출처 정책에는 다음이 포함됩니다.
프런트엔드와 백엔드가 별도로 배포되는 프로젝트에서는 CORS를 해결하는 것이 중요합니다. 쿠키는 사용자 로그인 정보를 저장하는 데 사용되며 Spring 인터셉터는 권한을 관리합니다. 인터셉터와 CORS가 잘못된 순서로 처리되어 CORS 오류가 발생하는 문제가 발생합니다.
HTTP 요청은 서블릿에 도달하기 전에 먼저 필터를 거친 다음 인터셉터에 도달합니다. 인증 차단 전에 CORS 처리가 이루어지도록 하기 위해 필터에 CORS 구성을 배치할 수 있습니다.
@Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration); return new CorsFilter(urlBasedCorsConfigurationSource); } }
JSONP는 프런트엔드에서 교차 출처 문제를 해결할 수 있지만 RESTful 애플리케이션에서는 제한되는 GET 요청만 지원합니다. 대신 백엔드에서 CORS(Cross-Origin Resource Sharing)를 사용하여 원본 간 요청을 처리할 수 있습니다. 이 솔루션은 Spring Boot에만 국한된 것이 아니며 기존 SSM 프레임워크에서 사용되었습니다. WebMvcConfigurer 인터페이스를 구현하고 addCorsMappings 메소드를 재정의하여 이를 구성합니다.
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); } }
@RequestMapping 주석에 @CrossOrigin 주석을 추가하여 특정 컨트롤러 메서드에 대해 CORS를 활성화할 수 있습니다. 기본적으로 @CrossOrigin은 @RequestMapping에 지정된 모든 원본과 HTTP 메서드를 허용합니다.
@RestController @RequestMapping("/account") public class AccountController { @CrossOrigin @GetMapping("/{id}") public Account retrieve(@PathVariable Long id) { // ... } @DeleteMapping("/{id}") public void remove(@PathVariable Long id) { // ... } }
@CrossOrigin 매개변수 이해하기:
예:
@CrossOrigin @RestController public class PersonController { @RequestMapping(method = RequestMethod.GET) public String add() { // some code } }
위 내용은 Spring Boot: 교차 원본 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!