Cross-Origin beim Abrufen von Spring Endpoint

[8u3631984]

Hallo ich bekomme beim Abrufen einer loakeln URL ein Fehler in der Browser Conosle :

 (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:8080/api/v1/test/swVersion. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt).

Ich habe eine Spring Boot Anwendung laufen (localhost:8080) und ein React Frontend läuft auch lokal

Leider weiß ich nicht weiter.
Kann mir jemand helfen ?

Hier ist mein React Request :

 useEffect(() => {
  axios.get('http://localhost:8080/api/v1/test/swVersion').then((response) => {
   setBuildInfo(response.data);
  });
 }, []);

Hier ist mein Controller :

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api/v1/test/")
@Log4j2
public record TestController(BuildProperties configuration){
...
    @GetMapping("swVersion")
    public BuildPropertiesDTO getSWVersion() {
        log.info("get sw version {}", configuration.getProjectVersion());

        return BuildPropertiesDTO.builder().withProjectVersion(configuration.getProjectVersion()).build();

    }
}

 

[Oneixee5]

Du kannst axios Header mitgeben um den Zugriff auf den Host zu erlauben:

headers: {
      'Access-Control-Allow-Origin': 'http://localhost:8080',
      'Content-Type': 'application/json',
      ...
    },

Mit * statt origin - wird per Wildcard alles erlaubt. Das sollte natürlich in Produktionsumgebungen nicht so verwendet werden.
Siehe: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Ich denke in Spring Boot kann man das mit Annotations machen:
@CrossOrigin(origins = {"http://localhost:8080"})
@RestController
...