Как добавить заголовки запроса Cross Origin Resource Sharing?
Я создаю REST-потребителя с помощью React JS, я создал REST api в качестве серверной службы, интерфейс будет совершенно другим приложением. Чтобы отделить фронтенд от бэкэнда.
То, с чем я сейчас борюсь, - это запрос на перекрестное происхождение от внешнего интерфейса к серверному. Серверная часть размещается на http: // локальный: 8080, а приложение реакции внешнего интерфейса размещается на http: // локальный: 3000. При запросе на консоли появляется следующая ошибка:
Failed to load http://localhost:8080/api/something: 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:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Прямо сейчас я исправил эту ошибку с помощью расширения Chrome, чтобы разрешить CORS: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Но это всего лишь временное решение, я попытался добавить заголовок Access-Control-Allow-Origin, но, похоже, это не сработало.
Этот мой код использовался для запроса:
let Myheaders = new Headers()
Myheaders.append("Access-Control-Allow-Origin", "http://localhost:8080/")
let res = await fetch("http://localhost:8080/api/something",
{
method: "get",
mode: "cors",
headers: Myheaders
})
let res1 = await res.json()
Я пробовал добавить несколько значений для заголовка Доступ-Контроль-Разрешить-Происхождение с обратная косая черта или без обратная косая черта, но ничего не работает.
Кто-нибудь сталкивается с теми же проблемами и находит решение?
Спасибо, оказалось, что это проблема с серверной частью. Бэкэнд построен в Springboot с Kotlin, и в этом руководстве он работал с первой попытки: spring.io/guides/gs/rest-service-cors
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
это проблема с сервером, а не с интерфейсом вы должны разрешить коры из бэкэнда, и это зависит от технологии, используемой в бэкэнде
Что ж, я могу делать запросы от почтальона к бэкэнду, так что все настроено правильно.
@HarryStylesheet - принятый ответ на повторяющийся вопрос объясняет, почему он работает с Postman, но не с JS на основе вашего браузера.
У меня была такая же проблема раньше, когда запрос идет из браузера, он включает домен в свой заголовок, но в почтальоне не отправляется какой-либо домен в заголовке, я использую весеннюю загрузку в моем бэкэнде, и я делаю это, добавляя @Bean CorsConfigurationSource corsConfigurationSource () {CorsConfiguration конфигурация = новая CorsConfiguration (); configuration.setAllowedOrigins (Arrays.asList ("example.com ")); configuration.setAllowedMethods (Arrays.asList (" GET "," POST ")); ..... return source;} в мою конфигурацию безопасности
Теперь это исправлено, я также использовал Springboot и Kotlin в бэкэнде. Мне помог этот туториал: spring.io/guides/gs/rest-service-cors. Просто в аннотации @CrossOrigin (origins = "localhost: 9000 ") над вашим контроллером REST
это хорошо, но если вы разрешите CORS для всех API, вы можете сделать это, добавив код, чтобы избежать добавления аннотации ко всем вашим API
`@Bean public WebMvcConfigurer corsConfigurer () {return new WebMvcConfigurerAdapter () {@Override public void addCorsMappings (реестр CorsRegistry) {registry.addMapping (" / javaconfig "). AllowedOrigins (" RR_0 }_RR). AllowedOrigins ("RR_0 }_RR);
Ваш JavaScript не может дать себе разрешение на доступ к REST API. Разрешение должно быть предоставлено REST API. Заголовки, которые вы пытаетесь добавить, принадлежат отклик, а не запросу.