J'ai un simple service spring boot
qui s'exécute dans un conteneur docker
exposé sur le port 8080
qui appelle une base de données mysql
.
Quand je tape localhost:8080/blogs
, je récupère [{"author":"Christopher Bolton","title":"Test Title 1","content":"This is some content","date":"2017-08-29"}]
Cela fonctionne très bien quand je frappe directement dans le navigateur. Cependant, lorsque je l’essaie à partir de jQuery
, je reçois le Access-Control-Allow-Origin
normal.
Voici mon service de démarrage de printemps:
@SpringBootApplication
@RestController
public class ChrisboltonServiceApplication {
public static void main(String[] args) {
SpringApplication.run(ChrisboltonServiceApplication.class, args);
}
@Autowired
private JdbcTemplate jdbcTemplate;
@CrossOrigin
@RequestMapping(path="/blogs")
public @ResponseBody Iterable<ChrisBolton> getAllUsers() {
List<ChrisBolton> result = jdbcTemplate.query(
"SELECT * FROM blog",
(rs, rowNum) -> new ChrisBolton(rs.getString("author"),
rs.getString("title"),
rs.getString("content"),
rs.getDate("date"))
);
return result;
}
}
Voici ma jQuery
:
$.ajax({
url: "http://localhost:8080/blogs",
crossDomain: true
}).done(function(data) {
console.log(data);
});
Mais je reçois toujours cette erreur:
XMLHttpRequest cannot load http://localhost:8080/blogs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
J'ai essayé this en ajoutant le @CrossOrigin
à la méthode getAllUsers()
et j'ai essayé au niveau de la classe. J'ai également regardé this parce que j'utilise mon interface utilisateur sur le port 3000
. Mais ce lien n'est pas spécifique au printemps.
MODIFIER
Ajout de mes en-têtes de requête:
GET /blogs HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Accept: */*
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113
Safari/537.36
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Réponse dans l'onglet Réseau (Chrome):
[{"author":"Christopher Bolton","title":"Test Title 1","content":"This is some content","date":"2017-08-29"}]
Il semble donc que je récupère des données dans l'onglet Réseau. Cependant, mon console.log(data)
produit le Access-Control-Allow-Origin
Essayez d'ajouter ceci à votre application:
@SpringBootApplication
@RestController
public class ChrisboltonServiceApplication {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
};
}
...
Essayez également de supprimer le crossDomain: true
de la $.ajax()
.
Vous pouvez ajouter @CrossOrigin("http://localhost:8080")
à la méthode appropriée si vous souhaitez que :8080
autorise la requête à cet endroit. C'est une configuration simple pour un terminal/contrôleur. Vous pouvez également utiliser variable ici pour une personnalisation ultérieure.