Невозможно отправить запрос на отправку HttpClient в Angular из-за проблемы с CORS

Я разрабатываю веб-приложение с использованием Angular. Backend API разработан с использованием PHP-фреймворка Laravel. Я включил доступ CORS, создав промежуточное ПО в Laravel.

Это промежуточное ПО Laravel

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Headers','X-Requested-With,content-type')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

Я могу успешно сделать такой запрос GET.

this.http.get<IEvent[]>(this.globals.API_ENDPOINT + "event/list?email = " + email).subscribe(data=> {
    //do something with the data
});

Вышеупомянутый запрос GET работает нормально. Но проблема в том, чтобы сделать POST-запрос с некоторыми параметрами.

Я отправляю запрос POST вот так.

var formData = {
   name: "My name"
}
this.http.post<ISimpleForm>(this.globals.API_ENDPOINT + "event/post", formData).subscribe(data=>{

})

Как видите, переменная formData - это объект. Когда я отправляю запрос, у меня в консоли появляется эта ошибка.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 

Я пробовал много решений в Интернете. Например, передача заголовков с «Content-Type» с «application / json» и так далее. Ни один из них не помог. Я уже решил проблему CORS и на стороне сервера.

Но запрос работает, когда я отправляю тело в виде строки, подобной этой

this.http.post<ISimpleForm>(this.globals.API_ENDPOINT + "event/post", formData).subscribe(data=>{

    })

Ошибка CORS исчезла, когда я натянул тело. Но проблема в том, что когда я регистрирую данные запроса на стороне сервера с помощью $ _POST, в запрос ничего не передается. Итак, тело пусто.

Итак, как я могу сделать почтовый запрос с некоторыми параметрами запроса, используя HttpClient в Angular? Что не так с моим кодом и как это исправить?

связанные: stackoverflow.com/questions/5750696/…

Jeff 09.04.2018 12:52

похоже (в нерабочей версии) сервер некорректно отвечает на предварительный запрос OPTIONS, который ваш браузер выполнит перед как фактический запрос POST.

Jeff 09.04.2018 12:53

предлагая это промежуточное ПО с установленным github.com/barryvdh/laravel-cors

vishal pardeshi 09.04.2018 12:54

используйте прокси в angular, проверьте этот пост stackoverflow.com/q/37172928/3898339

Deep 3015 09.04.2018 12:55

Пробовал, все равно не работает @ Deep3015

Wai Yan Hein 09.04.2018 13:02

Привет, @vishalpardeshi, я использую промежуточное ПО CORS в laravel. Я считаю, что мои работы, потому что, когда я сделал запрос на получение, я получал ошибку cors. Я решил это, добавив промежуточное ПО CORS.

Wai Yan Hein 09.04.2018 13:03

Привет, @Wai Yan Hein, но у меня была такая же ошибка. это промежуточное ПО работает для методов, а не для предпечатного заголовка. цыпленок это stackoverflow.com/questions/34748981/…

vishal pardeshi 09.04.2018 13:11

@vishalpardeshi. Ты прав. Промежуточное ПО, которое я использовал ранее, не работало должным образом. Когда я использовал ваш, теперь все работают. Огромное спасибо.

Wai Yan Hein 09.04.2018 13:44
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
8
1 134
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Некоторое время назад я получил ту же ошибку. это промежуточное ПО работает для методов, а не для предпечатного заголовка. Отметьте это Laravel 5.2 CORS, GET не работает с ОПЦИЯМИ предполетной подготовки

Предлагаем использовать это в вашем проекте github.com/barryvdh/laravel-cors вместо промежуточного программного обеспечения.

Другие вопросы по теме