Möglicherweise wird die folgende Fehlermeldung angezeigt:
wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden
Dieser Fehler weist darauf hin, dass eine Anfrage an eine bestimmte Adresse vom CORS-Protokoll blockiert wurde, weil der Access-Control-Allow-Origin-Header in der Ressource fehlt.
Die Hauptursache für Cross-Origin-Probleme liegt darin, dass Browser aus Sicherheitsgründen den Zugriff auf Ressourcen außerhalb der aktuellen Site einschränken.
Stellen Sie sich zum Beispiel eine Website vor, die unter http://127.0.0.1:8080/ mit einer bestimmten Seite gehostet wird. Wenn Sie von derselben Site aus auf Ressourcen zugreifen, gibt es keine Einschränkungen. Wenn Sie jedoch versuchen, von einer anderen Site aus auf Ressourcen zuzugreifen (z. B. http://127.0.0.1:8081), blockiert der Browser die Anfrage.
Hinweis: Wir betrachten Protokoll, Domäne und Port als Teil der Definition eines „gleichen Ursprungs“.
Elemente mit einem src-Attribut, wie img- und script-Tags, unterliegen dieser Einschränkung nicht.
In der Vergangenheit, als Front-End und Back-End nicht getrennt waren, existierten Seiten und Anforderungsschnittstellen unter derselben Domäne und demselben Port. Browser würden dann Anfragen von einer Seite, die in einer Domain gehostet wird, erlauben, Ressourcen von derselben Domain anzufordern.
Zum Beispiel kann http://127.0.0.1:8080/index.html http://127.0.0.1:8080/a/b/c/userLit frei anfordern.
Heutzutage, da Front-End und Back-End in verschiedene Anwendungen getrennt sind, ist dies nicht zulässig und führt zu CORS-Problemen.
Ursprung (oder Quelle) besteht aus dem Protokoll, der Domäne und der Portnummer.
Eine URL besteht aus Protokoll, Domäne, Port und Pfad. Zwei URLs gelten als „gleicher Ursprung“, wenn ihr Protokoll, ihre Domäne und ihr Port alle identisch sind. Jeder Unterschied in einem dieser drei Elemente stellt eine herkunftsübergreifende Anfrage dar.
Erwägen Sie herkunftsübergreifende Vergleiche für 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!