Vous pourriez rencontrer le message d'erreur suivant :
a été bloqué par la politique CORS : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée
Cette erreur indique qu'une requête adressée à une certaine adresse a été bloquée par le protocole CORS car l'en-tête Access-Control-Allow-Origin est manquant dans la ressource.
La cause première des problèmes d'origine croisée est que les navigateurs, pour des raisons de sécurité, restreignent l'accès aux ressources en dehors du site actuel.
Par exemple, considérons un site Web hébergé sur http://127.0.0.1:8080/ avec une certaine page. Si vous accédez aux ressources du même site, il n'y a aucune restriction. Mais si vous essayez d'accéder aux ressources d'un autre site (par exemple, http://127.0.0.1:8081), le navigateur bloquera la demande.
Remarque : Nous considérons le protocole, le domaine et le port dans le cadre de la définition d'une « même origine ».
Les éléments avec un attribut src, comme les balises img et script, ne sont pas soumis à cette restriction.
Historiquement, lorsque le front-end et le back-end n'étaient pas séparés, les pages et les interfaces de requête existaient sous le même domaine et le même port. Les navigateurs autoriseraient alors les requêtes d'une page hébergée sur un domaine à demander des ressources du même domaine.
Par exemple, http://127.0.0.1:8080/index.html peut demander librement http://127.0.0.1:8080/a/b/c/userLit.
De nos jours, avec le front-end et le back-end séparés en différentes applications, cela n'est pas autorisé et déclenchera des problèmes CORS.
L'origine (ou source) comprend le protocole, le domaine et le numéro de port.
Une URL est composée d'un protocole, d'un domaine, d'un port et d'un chemin. Deux URL sont considérées comme « de même origine » si leur protocole, leur domaine et leur port sont tous identiques. Toute différence sur l'un de ces trois éléments constitue une demande d'origine croisée.
Envisagez des comparaisons d'origines croisées pour 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 |
The Same-Origin Policy is a fundamental browser security feature. Without it, the normal functionality of browsers could be at risk. Web architecture heavily depends on this policy, and browsers implement it to ensure security.
The Same-Origin Policy includes:
In a project where the front-end and back-end are deployed separately, addressing CORS is crucial. Cookies are used to store user login information, and Spring interceptors manage permissions. Issues arise when the interceptor and CORS are processed in the wrong order, causing a CORS error.
An HTTP request first goes through the filter before reaching the servlet and then the interceptor. To ensure CORS processing occurs before authorization interception, we can place the CORS configuration in a filter.
@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); } }
While JSONP can address cross-origin issues on the front-end, it only supports GET requests, which is limiting in RESTful applications. Instead, you can handle cross-origin requests with Cross-Origin Resource Sharing (CORS) on the back-end. This solution is not unique to Spring Boot and has been used in traditional SSM frameworks. You configure it by implementing the WebMvcConfigurer interface and overriding the addCorsMappings method.
@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); } }
You can enable CORS for specific controller methods by adding the @CrossOrigin annotation to the @RequestMapping annotation. By default, @CrossOrigin allows all origins and HTTP methods specified in @RequestMapping.
@RestController @RequestMapping("/account") public class AccountController { @CrossOrigin @GetMapping("/{id}") public Account retrieve(@PathVariable Long id) { // ... } @DeleteMapping("/{id}") public void remove(@PathVariable Long id) { // ... } }
Understanding @CrossOrigin Parameters:
Example:
@CrossOrigin @RestController public class PersonController { @RequestMapping(method = RequestMethod.GET) public String add() { // some code } }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!