Я обслуживал угловое приложение в порту 4202 и подключаюсь к приложению удаления пружины mvc по приведенному ниже коду.
this.http.post<Hero[]>('http://localhost:8080/api/hero/list', {"id":1}, httpOptions)
Но сообщается об ошибке ниже.
Failed to load http://localhost:8080/api/hero/list: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4202' is therefore not allowed access. The response had HTTP status code 403.
Итак, я попытался включить cors в своем весеннем веб-приложении с помощью функции ниже, чем в методе контроллера.
@CrossOrigin(origins = "http://localhost:4202")
Я также попытался добавить класс конфигурации, как показано ниже.
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}
Затем я обновляю свой интерфейс, как сказано ниже.
Failed to load http://localhost:8080/api/hero/list: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4202, *', but only one is allowed. Origin 'http://localhost:4202' is therefore not allowed access.
Затем я проверил свою хром-сеть, как показано ниже, она действительно дублировала заголовок «Access-control-allow-origin».
Потом я много погуглил и обнаружил, что другие парни сталкивались с этой проблемой, поскольку другой веб-сервер перед tomcat генерирует вторую голову «Access-control-allow-origin». Но у меня есть только один сервер tomcat, за исключением сервера, запущенного с помощью ng serve .
Затем я попытался посетить этот URL-адрес (http://localhost:8080/api/hero/list) напрямую с помощью Fiddler, а не Angular. А ниже на скриншоте я могу обнаружить, что не существует дублированного «Access-Control-Allow-Origin».
Итак, я догадывался, было ли это вызвано сервером nodejs, запущенным angular? Так как я был новичком в angular, я не знаю, как разобраться в этом вопросе. Спасибо.