Проблема с CORS, предполетный запрос в браузере Chrome - PullRequest
Новая
       23

Проблема с CORS, предполетный запрос в браузере Chrome

1 голос
/ 20 марта 2019

У меня проблема с разрабатываемым приложением.API находится в PHP Symfony 4, а приложение сделано с использованием Ionic 4.

У меня проблема при выполнении запросов PATCH.Запрос очень хорошо работает на POSTMAN, а также на моем телефоне, но у меня возникают проблемы с CORS при попытке в браузере (Google Chrome, Firefox).

Я запросил и понял, что сначала идет запрос PATCHчерез предполетный запрос и, следовательно, отправляет запрос с методом OPTIONS в мой API.

Я справился с этим методом и возвратил код 200, после чего допустил правильные заголовки в моем файле index.php следующим образом: 

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header("Access-Control-Allow-Methods: GET, HEAD, PATCH, OPTIONS, POST, PUT");

В начале у меня была первая ошибка, которая указала, что запрос не возвращал код 200, поэтому я управлял методом OPTIONS в своем API.Тогда у меня появляется следующая ошибка: 

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это странно, потому что ошибка там не появлялась раньше, и все остальные запросы работают.

Кроме того, я пытался с POSTMAN иМетод OPTIONS возвращает правильные заголовки.

Вы можете мне помочь?

Извините за грубый английский.

1 Ответ

0 голосов
/ 26 марта 2019 
Environement info-
   ionic (Ionic CLI)             : 4.0.0 
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.1.0

Для исправления ошибки CORS необходимо выполнить следующие действия:

  1. Создать в вашем Ionic-проекте (в корне) вызов файлаэто: proxy.conf.json напишите (копировать / вставить) внутри: 
"/api/*": {  
    "target": "http://myremoteserver/api",  
    "secure": false,  
    "logLevel": "debug"  
}

Откройте файл angular.json и установите строку proxyConfig": "proxy.conf.json", как показано ниже, в "serve" : 

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"

Откройте ваш package.json и добавьте эту строку в скрипт массив: 

"start": "ng serve --port 8100 --proxy-config proxy.conf.json"

вы должны получить что-то вроде этого (см. Ниже)): 

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 8100 --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
После того, как в командной строке выполните эту команду: npm run start

Если вы выполнили эти шаги, это должно быть OK

Со своей стороны это работает !!!

С уважением

...