web-dev-qa-db-fra.com

'Access-Control-Allow-Origin' avec démarrage à ressort

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

5
Chris Bolton

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().

10
acdcjunior

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.

0
Artur Czopek