J'ai une application de réaction de base en cours d'exécution sur localhost:3000 .
Cette react-app effectue un appel axios à une application SpringBoot sur localhost:9093 . L'application sur 9093 utilise Spring MVC pour renvoyer une redirection vers une autre application SpringBoot sur localhost:8183 . Enfin, l'application sur 8183 renvoie une redirection vers l'application localhost:3000 -app sur localhost:3000 .
Lorsque j'essaye ceci, j'obtiens le message suivant dans mes outils de développement Chrome:
Access to XMLHttpRequest at 'http://localhost:3000/?err_code=inv_otk' (redirected from 'http://localhost:9093/saml?email=a@a.com') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Si la destination finale ainsi que l'origine sont toutes les deux sur localhost:3000 , pourquoi ai-je des problèmes?
S'il vous plaît laissez-moi savoir si plus d'informations sont nécessaires!
3 Réponses :
Vous aurez peut-être besoin de l'annotation @CrossOrigin sur votre contrôleur.
@RestController
@RequestMapping("/users")
@CrossOrigin
public class UserController {
// doSomething();
}
L'erreur Access-Control-Allow-Origin provient d'un appel ajax qui est révoqué par le navigateur dont le nom est OPTIONS call.
Le navigateur en voyant le code veut appeler un point de terminaison avec une URL différente d'origine actuelle essaie d'appeler un appel OPTIONS pour savoir s'il est autorisé à l'appeler. ainsi, lorsque l'appel OPTIONS échoue, le navigateur empêche d'exécuter tout le code actuel.
Pour la solution, vous devriez essayer quelques façons de passer l'appel OPTIONS . l'un d'eux insère un proxy dans votre configuration Webpack et transmet tous les OPTIONS appel 200.
Une autre façon consiste à transmettre 200 réponses pour chaque appel OPTIONS sur votre projet backend.
En outre, vous pouvez désactiver la sécurité de votre navigateur uniquement pour la zone de développement.
Vous pouvez utiliser ce code dans la classe d'application. Il autorisera tous les ports que vous utiliserez dans React JS. Cela doit être fait dans la classe Spring Boot Application.
/*****Cross Origin Implementation*****/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("*")
.allowedOrigins("*")
.allowedHeaders("*")
.allowCredentials(true);
}
Merci pour la réponse. J'ai ajouté cela aux deux microservices Spring Boot mais j'obtiens toujours exactement le même problème. J'ai trouvé une solution de contournement en utilisant une extension chrome qui contourne la vérification des cors, mais je préférerais ne pas l'utiliser