J'ai un problème que je ne semble pas comprendre .. Je veux envoyer une requête http de mon
Client angulaire:
const url = 'http://localhost:8080/api';
console.log(this.http.get(url).subscribe(data => this.greeting = data));
sur le backend SpringBoot où j'utilise l'annotation CORS:
@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
@RequestMapping("/api/")
public Map<String,Object> home() {
Map<String,Object> model = new HashMap<String,Object>();
model.put("id", UUID.randomUUID().toString());
model.put("content", "Hello World");
return model;
}
mais j'obtiens une erreur indiquant qu'il est bloqué et me redirige pour me connecter tout le temps.
Failed to load http://localhost:8080/api: Redirect from 'http://localhost:8080/api' to 'http://localhost:8080/login' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
Y a-t-il un moyen de changer cela?
J'apprécie n'importe quel conseil ou aide concernant ceci. Je voudrais comprendre pourquoi ce problème se produit.
Vous avez une erreur dans votre RequestMapping
, car vous avez utilisé @RequestMapping("/api/")
, ceci sera évalué comme http://your_url/api//
. Un tel mappage n'est pas présent dans votre contrôleur, il vous donne donc une erreur CORS Origin.
Supprimez simplement le /
final de @RequestMapping("/api/")
pour qu'il soit @RequestMapping("/api")
.
Votre classe devrait ressembler à ce qui suit,
@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class DemoController {
@RequestMapping(value = "/api", method = RequestMethod.GET)
public Map<String,Object> home() {
Map<String,Object> model = new HashMap<String,Object>();
model.put("id", UUID.randomUUID().toString());
model.put("content", "Hello World");
return model;
}
}
C'est le problème avec votre côté serveur. tout ce que vous aurez à faire est de créer un composant dans votre serveur et cela résoudra le problème. ou se référer ici
suivez ce code:
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class RequestFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
try {
chain.doFilter(req, res);
} catch(Exception e) {
e.printStackTrace();
}
} else {
System.out.println("Pre-flight");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "authorization, content-type," +
"access-control-request-headers,access-control-request-method,accept,Origin,authorization,x-requested-with");
response.setStatus(HttpServletResponse.SC_OK);
}
}
}
Au lieu d'annoter chaque méthode avec @Crossorigin
, vous pouvez utiliser un filter
dans web.xml
comme mentionné ci-dessous
Ajoutez le filtre ci-dessous au fichier web.xml
.
<filter>
<filter-name>cors</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
La dépendance pour le pot mentionné est donnée ci-dessous.
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5</version>
</dependency>
C'est ça - Fait.
Comme vous avez choisi d'annoter votre application, vous devez fournir l'annotation @CrossOrigin
pour chaque méthode individuellement. Cela signifie que vous devez également faire:
@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
@RequestMapping("/login/")
public Map<String,Object> login() {
/* ... */
}
Référence: https://spring.io/guides/gs/rest-service-cors/#_enabling_cors