Как фронтенд-разработчик, почти все приложения и веб-приложения, которые я разработал и разрабатываю, полагаются на веб-службы, которые обычно обрабатывают всю информацию через API ...
… И каждый раз я натыкаюсь на печально известную ошибку политики CORS. Я думаю, что потратил бесконечные часы, пытаясь объяснить, что такого рода ошибки зависят исключительно от сервера, и я слышал самые причудливые теории о том, чтобы каким-то образом возложить ответственность на интерфейс, среди которых:
«это должен быть ваш браузер, попробуйте другой»
«Наш поток приложения не ожидал вызова OPTIONS»
«Он работает на Почтальоне, поэтому он должен быть сломан на вашей стороне»
Раз и навсегда: интерфейс не несет ответственности ВООБЩЕ за ошибки CORS, сервер ДОЛЖЕН включать заголовок, который позволяет браузеру извлекать данные.
Если вы фронтенд-разработчик, можете перестать читать здесь, вам больше ничего не нужно знать, чтобы ваше приложение работало.
Но если вы являетесь внутренним разработчиком, пожалуйста, пожалуйста следуйте этим простым рекомендациям, чтобы облегчить себе жизнь и жизнь фронтенд-разработчиков, с которыми вы работаете:
1. Смена браузера не помогает, КАЖДЫЙ браузер запускает политику CORS, за что вы должны быть благодарны: знание того, откуда идет POST, должно помочь вам отслеживать ваши API. аналитика.
2 - вызов OPTIONS: запускать этот вызов OPTIONS не является решением разработчика, это часть спецификации политики CORS. Просто разрешите такой метод через заголовки.
3- Почтальон. Postman - отличный инструмент для тестирования API, однако в данном конкретном случае он не подходит для тестирования. Политика CORS активируется ТОЛЬКО в браузерах. Если вы ищете подходящую среду для тестирования вызова CORS, попробуйте https://www.test-cors.org/, который, кроме ваше веб-приложение - единственное место, где вы можете воспроизвести ошибку. cURL и wGet также недействительны. Используйте браузер, B-R-O-W-S-E-R.
ЗАГОЛОВКИ
В заключение, мой дорогой backend-разработчик, помните, что вы будете иметь дело с заголовками:
Access-Control-Allow-Origin: оставьте его со звездочкой (*), если вы разрабатываете приложение, в противном случае заполните его списком разрешенных хостов.
Access-Control-Allow-Methods:вы должны разрешить здесь ОПЦИИ и все методы, которые используют ваши API (например: GET, OPTIONS, PUT, PATCH, POST)
Access-Control-Allow-Headers: если вы используете OAuth, ответьте значением с заголовками, необходимыми для OAuth (например: Авторизация)
Только эти три заголовка обеспечат базовую обработку CORS, если вам нужны более точные функции, посетите официальную спецификацию.
Надеюсь, эта статья окажется для вас полезной ❤
