Я добавил CORS в заголовок, но в моем запросе все еще возникает проблема CORS. Как правильно добавлять и обрабатывать CORS и другие запросы в заголовках?
Вот код служебного файла:
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin':'*',
'Authorization':'authkey',
'userid':'1'
})
};
public baseurl = 'http://localhost/XXXXXX';
userAPI(data): Observable<any> {
return this.http.post(this.baseurl, data, httpOptions)
.pipe(
tap((result) => console.log('result-->',result)),
catchError(this.handleError('error', []))
);
}
Ошибка:
Ответ на предполетный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Origin ' http: // localhost: 4200 ' поэтому не имеет доступа
не удалось: ответ об ошибке HTTP для (неизвестный URL): 0 Неизвестная ошибка
В моем серверном коде я добавил CORS в индексный файл.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
Ответы:
По моему опыту, плагины работали с HTTP, но не с последней версией httpClient. Кроме того, настройка заголовков ответов CORS на сервере не была вариантом. Итак, я создал
proxy.conf.json
файл, который действует как прокси-сервер.Подробнее об этом читайте здесь .
proxy.conf.json
файл:Я поместил
proxy.conf.json
файл рядом сpackage.json
файлом в том же каталоге.Затем я изменил команду запуска в файле package.json:
HTTP-вызов из моего компонента приложения:
Наконец, чтобы запустить мое приложение, мне пришлось бы использовать
npm start
илиng serve --proxy-config proxy.conf.json
источник
target
как в файле proxy.config?HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/", ok: false, …} error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) message: "Unexpected token < in JSON at position 0" "
Вы также можете попробовать
fetch
функцию иno-cors
режим. Иногда мне легче настроить его, чем встроенный http-модуль Angular. Вы можете щелкнуть запросы правой кнопкой мыши на вкладке сети инструментов Chrome Dev и скопировать их в синтаксисе выборки, что отлично.источник
no-cors
блокирует это. Он также блокирует установку типа содержимого наapplication/json
.Access to XMLHttpRequest at '..' from origin '..' has been blocked by CORS policy: Request header field x-timezone is not allowed by Access-Control-Allow-Headers in preflight response.
невозможность переопределитьAccess-Control-Request-Headers: cache-control,x-timezone
что было добавлено по умолчанию :( и Github имеет это в ответ,Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, Accept-Encoding, X-GitHub-OTP, X-Requested-With, User-Agent
httpclient
с перехватчика долго спиной :)Если вы похожи на меня, и вы используете локальный сервер SMS-шлюза и делаете запрос GET на IP-адрес, например 192.168.0.xx, вы обязательно получите ошибку CORS.
К сожалению, мне не удалось найти решение для Angular, но с помощью предыдущего воспроизведения я получил свое решение и публикую обновленную версию для Angular 7 8 9
Просто подпишитесь как обычно.
источник
Сделайте так, чтобы заголовок HttpClient в NG5 выглядел так:
Вы сможете сделать вызов api с вашим URL-адресом localhost, у меня это работает ..
источник
POST с httpClient в Angular 6 также выполнял запрос OPTIONS:
Общие заголовки:
Мой сервер Perl REST реализует запрос OPTIONS с кодом возврата 200.
Заголовок следующего запроса POST:
Обратите внимание на заголовки Access-Control-Request: тип-содержимого.
Итак, мой внутренний скрипт на Perl использует следующие заголовки:
С этой настройкой у меня работали GET и POST!
источник
пожалуйста, импортируйте запросы из угловых коров
и добавьте параметры запроса в свой код, как показано ниже
вариант отправки запроса в вашем запросе API
фрагмент кода ниже-
и добавьте CORS в свой внутренний PHP-код, где сначала будут выполняться все запросы api.
попробуйте это и дайте мне знать, работает он или нет, у меня была такая же проблема, я добавлял CORS из angular5, который не работал, затем я добавил CORS в бэкэнд, и это сработало для меня
источник
Следующее сработало для меня после нескольких часов попыток
Однако следующий код не сработал, я не понимаю, почему, надеюсь, кто-то может улучшить этот ответ.
источник