Почему в Angular дублируется запрос?

Question

[templton1982]

Здравствуйте!

Делаю простой метод в сервисе

getData() {
       return this.http.get(this.apiUrl + '?method=users'); // - вот это отрабатывает 1 раз
    }

А если в этом методе сделать запрос
return this.http.put(this.apiUrl,{'sad':'10'});
то он повторяется два раза. То же самое для POST

prntscr.com/h90eng

При этом в первом запросе заголовки возвращаются нормальные (cors), но данные не уходят. А второй запрос данные отправляет нормально, но в ответе нет заголовков cors

И еще. Первый запрос уходит с Request Method:OPTIONS, initiator - zone.js. Тело запроса пустое.
А второй запрос уже нормальный Request Method:PUT. Но initiator - other. В теле запроса уходят правильные данные.

Answer 1

[zvnt]

https://developer.mozilla.org/ru/docs/Web/HTTP/Met...

Comments

[templton1982]

Спасибо!!!

Век живи - век учись)

Осталось только понять, почему во втором запросе PUT срабатывает ошибка cors. На сервере выставляю такие заголовки:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization");
header("Content-Type: application/json");

Делаю по такой статье:
https://metanit.com/web/angular2/6.4.php

Может еще какие заголовки надо добавить на сервере?

[templton1982]

Добавил
const urlParams = new HttpParams().set("id", id.toString());
const myHeaders = new HttpHeaders().set('withCredentials', '1');
return this.http.delete(this.apiUrl, {params: urlParams, headers: myHeaders});

На php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization, withCredentials');

Пробовал
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");

Никак не хочет...

Может потому что я с локального хоста?
localhost:4200

[zvnt]

У вас apiUrl - адрес удаленной машины? Если так, попробуйте запускать сервер, который сервит ваше локальное приложение, с проксированием запросов на удаленный url.
так http-server -a 127.0.0.1 -p SOME_PORT APP_FOLDER -c-1 --cors -P REMOTE_API_URL
или так app.use('/api', proxy(REMOTE_API_URL)), если у вас самописный сервер.
как-то так.
для proxy() во втором примере нужен express-http-proxy.

[templton1982]

Фига се))) У меня на удаленный сервер - это shared хостинг.
Весь мой api сейчас такой))

prntscr.com/h91bm5

[templton1982]

Ну, как-то же angular тестируют с локального хоста? Попробую yii api развернуть на хостинге. Может я чего не так делаю...

[zvnt]

templton1982, я сталкивался с этой проблемой и решения нашел два: то что я написал выше(проксированние запросов через локальный сервер, чтобы браузер думал, что обращается к localhost и не ругался на cors) или отключение запрета на cors в браузере, к примеру, плагином, к примеру, таким https://chrome.google.com/webstore/detail/allow-co...

[templton1982]

"Знать все на свете нереально. Но я, мечту свою лелея..."

Короче, закинул свой api скрипт на другой хостинг и проблема ушла. Кросс доменный запрос стал отрабатывать. Все гуд.

Видимо, настройки хостинга какие-то... Потому как скрипт один в один. На одном хостинге ошибка. А на другом норм. Причем нормально отрабатывает на кириллическом хостинге. Хотя вряд ли в этом дело.

[templton1982]

Спасибо, что приняли участие в решении проблемы!!!