Angular access control allow origin

Нет заголовка «Access-Control-Allow-Origin» в приложении Angular 2

для этого проекта я просто изучаю и практикую Angular 2. У меня нет серверной части, и я делаю запросы API к barchart OnDemand api .

мне интересно, можно ли обойти проблему cors. Я все еще довольно новыми для всего этого, так что ребенок вам очень признателен! Я использую http://localhost:8080 .

сообщение об ошибке: (ключ api прокомментирован)

XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

в моей консоли ошибка requestData: Error: [object Object]

11 ответов

это проблема с конфигурацией CORS на сервере. Неясно, какой сервер вы используете, но если вы используете Node + express, вы можете решить его со следующим кодом

этот код был ответ @jvandemo к очень похожему вопросу.

ваши методы ресурсов не будут поражены, поэтому их заголовки никогда не будут установлены. Причина в том, что перед фактическим запросом, который является запросом опций, существует так называемый запрос предполетной подготовки. Таким образом, ошибка возникает из-за того, что запрос preflight не создает необходимые заголовки. проверьте, что вам нужно будет добавить следующее .реврайт файл:

У меня также была такая же проблема при использовании http://www.mocky.io/ то, что я сделал, это добавить в макет.заголовок ответа ввода-вывода: Access-Control-Allow-Origin*

, чтобы добавить его там просто нужно нажать на дополнительные параметры

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

просто вы можете установить в как

к сожалению, это не ошибка Angular2, это ошибка, с которой работает ваш браузер (т. е. вне вашего приложения).

этот заголовок CORS должен быть добавлен к этой конечной точке на сервере, прежде чем вы сможете сделать какие-либо запросы.

Я также столкнулся с той же проблемой и прошли следующий путь решения этой проблемы.

добавить прокси когда я получаю веб-api, если вы используете lite-server, вы можете добавить файл BS-config.js .

надеюсь, что это помогает.

Я потратил много времени на решение и получил его, наконец, путем внесения изменений на стороне сервера.Проверяем сайт https://docs.microsoft.com/en-us/aspnet/core/security/cors

это сработало для меня, когда я включил corse на стороне сервера.Мы использовали Asp.Net ядро в API и приведенный ниже код работали

1)добавлены Addcors в ConfigureServices запуска.cs

2) добавлены UseCors в Configure метод как ниже:

Если вы создаете макет с SoapUI, бесплатный инструмент тестирования для REST и SOAP запроса и ответа, для приложения Angular 2+ вы должны помнить, чтобы установить внутри вашего HTTP-запроса заголовка

Я добавляю два изображения для помощи вашей вставки. Первый показывает заголовок, который вы должны добавить. Если вы хотите добавить заголовок, прежде чем нажать кнопку «плюс» (она зеленая).

второе изображение показывает вставить *. Значение * позволяет принимать все запросы от разных хостов.

после этой работы мое Угловое приложение удалило эту раздражающую ошибку в моей консоли.

большой ресурс, который помог мне понять для создания моего первого макета, — это видео. Это поможет вам создать новый макет внутри среды SoapUi без серверной части.

У меня была такая же проблема, когда я практиковал Angular5. Затем я наткнулся https://spring.io/guides/gs/rest-service-cors/ что помогло мне решить проблему.

Я хранил @CrossOrigin(exposedHeaders=»Access-Control-Allow-Origin») по моему методу отображения запроса. Мы также можем настроить это глобально в приложении spring boot.

еще один простой способ, без установки каких-либо

XMLHttpRequest: кросс-доменные запросы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/fetch-crossorigin.

Обычно запрос XMLHttpRequest может делать запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку.

Существует современный стандарт XMLHttpRequest, он ещё в состоянии черновика, но предусматривает кросс-доменные запросы и многое другое.

Большинство возможностей этого стандарта уже поддерживаются всеми браузерами, но увы, не в IE9-.

Впрочем, частично кросс-доменные запросы поддерживаются, начиная с IE8, только вместо XMLHttpRequest нужно использовать объект XDomainRequest.

Кросс-доменные запросы

Разберём кросс-доменные запросы на примере кода:

Мы создаём XMLHttpRequest и проверяем, поддерживает ли он событие onload . Если нет, то это старый XMLHttpRequest , значит это IE8,9, и используем XDomainRequest .
Запрос на другой домен отсылается просто указанием соответствующего URL в open . Он обязательно должен быть асинхронным, в остальном – никаких особенностей.

Читать еще: Storage access framework

Контроль безопасности

Кросс-доменные запросы проходят специальный контроль безопасности, цель которого – не дать злым хакерам™ завоевать интернет.

Серьёзно. Разработчики стандарта предусмотрели все заслоны, чтобы «злой хакер» не смог, воспользовавшись новым стандартом, сделать что-то принципиально отличное от того, что и так мог раньше и, таким образом, «сломать» какой-нибудь сервер, работающий по-старому стандарту и не ожидающий ничего принципиально нового.

Давайте, на минуточку, вообразим, что появился стандарт, который даёт, без ограничений, возможность делать любой странице HTTP-запросы куда угодно, какие угодно.

Как сможет этим воспользоваться злой хакер?

Он сделает свой сайт, например http://evilhacker.com и заманит туда посетителя (а может посетитель попадёт на «злонамеренную» страницу и по ошибке – не так важно).

Когда посетитель зайдёт на http://evilhacker.com , он автоматически запустит JS-скрипт на странице. Этот скрипт сделает HTTP-запрос на почтовый сервер, к примеру, http://gmail.com . А ведь обычно HTTP-запросы идут с куками посетителя и другими авторизующими заголовками.

Поэтому хакер сможет написать на http://evilhacker.com код, который, сделав GET-запрос на http://gmail.com , получит информацию из почтового ящика посетителя. Проанализирует её, сделает ещё пачку POST-запросов для отправки писем от имени посетителя. Затем настанет очередь онлайн-банка и так далее.

Спецификация CORS налагает специальные ограничения на запросы, которые призваны не допустить подобного апокалипсиса.

Запросы в ней делятся на два вида.

Простыми считаются запросы, если они удовлетворяют следующим двум условиям:

Простой метод: GET, POST или HEAD
Простые заголовки – только из списка:

Accept
Accept-Language
Content-Language
Content-Type со значением application/x-www-form-urlencoded , multipart/form-data или text/plain .

«Непростыми» считаются все остальные, например, запрос с методом PUT или с заголовком Authorization не подходит под ограничения выше.

Принципиальная разница между ними заключается в том, что «простой» запрос можно сформировать и отправить на сервер и без XMLHttpRequest, например при помощи HTML-формы.

То есть, злой хакер на странице http://evilhacker.com и до появления CORS мог отправить произвольный GET-запрос куда угодно. Например, если создать и добавить в документ элемент

CORS Errors

What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that browsers and webviews — like the ones powering Capacitor and Cordova — use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons, mainly to protect your user’s data and prevent attacks that would compromise your app.

In order to know if an external origin supports CORS, the server has to send some special headers for the browser to allow the requests.

An origin is the combination of the protocol , domain , and port from which your Ionic app or the external resource is served. For example, apps running in Capacitor have capacitor://localhost (iOS) or http://localhost (Android) as their origin.

When the origin where your app is served (e.g. http://localhost:8100 with ionic serve ) and the origin of the resource being requested (e.g. https://api.example.com ) don’t match, the browser’s Same Origin Policy takes effect and CORS is required for the request to be made.

CORS errors are common in web apps when a cross-origin request is made but the server doesn’t return the required headers in the response (is not CORS-enabled):

XMLHttpRequest cannot load https://api.example.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

How does CORS work

Request with preflight

By default, when a web app tries to make a cross-origin request the browser sends a preflight request before the actual request. This preflight request is needed in order to know if the external resource supports CORS and if the actual request can be sent safely, since it may impact user data.

Читать еще: No access to delivery location

A preflight request is sent by the browser if:

The method is:
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
Or if it has a header other than:
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
Or if it has a Content-Type header other than:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
Or if a ReadableStream or event listeners in XMLHttpRequestUpload are used.

If any of the conditions above are met, a preflight request with the OPTIONS method is sent to the resource URL.

Let’s suppose we are making a POST request to a fictional JSON API at https://api.example.com with a Content-Type of application/json . The preflight request would be like this (some default headers omitted for clarity):

If the server is CORS enabled, it will parse the Access-Control-Request-* headers and understand that a POST request is trying to be made from http://localhost:8100 with a custom Content-Type .

The server will then respond to this preflight with which origins, methods, and headers are allowed by using the Access-Control-Allow-* headers:

If the returned origin and method don’t match the ones from the actual request, or any of the headers used are not allowed, the request will be blocked by the browser and an error will be shown in the console. Otherwise, the request will be made after the preflight.

In our example, since the API expects JSON, all POST requests will have a Content-Type: application/json header and always be preflighted.

Simple requests

Some requests are always considered safe to send and don’t need a preflight if they meet all of the following conditions:

The method is:
- GET
- HEAD
- POST
Have only these headers:
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
The Content-Type header is:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
No ReadableStream or event listeners in XMLHttpRequestUpload are used.

In our example API, GET requests don’t need to be preflighted because no JSON data is being sent, and so the app doesn’t need to use the Content-Type: application/json header. They will always be simple requests.

Кросдоменные запросы на примере шрифтов и заголовок Access-Control-Allow-Origin

В файл .htaccess в каталоге, в котором находятся файлы шрифтов добавим следующие директивы (при отсутствии .htaccess его нужно создать):

Header set Access-Control-Allow-Origin «*»

При запросе файлов с расширением ttf, otf, eot или woff веб-сервер Apache (чаще всего используется он и передавать информацию путем указания директив .htaccess можно только ему) будет добавлять необходимый заголовок.

Header set Access-Control-Allow-Origin «*»

Заголовок предполагает, что шрифты может получать любой из сайтов в Интернете, можно ограничить доступ непосредственно указав имя ресурса. Несколько адресов при этом указать нельзя.

Access-Control-Allow-Origin: http://www.mysite.com
На стороне, на которой планируем использовать шрифты в файле CSS пропишем полные к ним пути

Это может выглядеть так:

@font-face <
font-family: ‘AudiNormal’;
src: url(‘http://www.mysite.com/css/fonts/League_Gothic.eot?’) format(‘eot’),
url(‘http://www.mysite.com/css/fonts/League_Gothic.woff’) format(‘woff’),
url(‘http://www.mysite.com/css/fonts/League_Gothic.ttf’) format(‘truetype’),
url(‘http://www.mysite.com/css/fonts/League_Gothic.svg’)

Или так (для каждого шрифта задаются определенные опции):

@font-face <
font-family: «AudiNormal»;
font-style: normal;
font-weight: normal;
src: url(‘http://www.mysite.com/style/auditype-normal.ttf’);
>
@font-face <
font-family: «AudiBold»;
font-style: normal;
font-weight: normal;
src: url(‘http://www.mysite.com/style/auditype-bold.ttf’);
>
@font-face <
font-family: «AudiExtNormal»;
font-style: normal;
font-weight: normal;
src: url(‘http://www.mysite.com/style/auditype-extendednormal.ttf’);
>
@font-face <
font-family: «AudiExtBold»;
font-style: normal;
font-weight: normal;
src: url(‘http://www.mysite.com/style/auditype-extendedbold.ttf’);
>

Схема с официального сайта Mozilla, объясняющая принципы работы CORS

Обширную информацию по теме можно найти на официальном сайте Mozilla и на сайтах других популярных браузеров.

Заголовок cors access control allow origin

CORS — Cross-Origin Resource Sharing

curl -I http://www.mysite.com/style/auditype-extendednormal.ttf

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 27 Jul 2017 08:54:38 GMT
Content-Length: 326620
Connection: keep-alive
X-Accel-Version: 0.01
Last-Modified: Wed, 26 Jul 2017 12:46:15 GMT
ETag: «21c6399-4fbdc-55537d562407a»
Accept-Ranges: bytes
Access-Control-Allow-Origin: *

Заголовок, как видно, добавился, но используя curl -I запрос отправляется методом HEAD, чтобы же работали кросдоменные запросы тот же заголовок должен отдаваться в ответ на запрос методом GET

Обратимся к тому же шрифты используя curl, но отправим запрос в этот раз методом GET

curl -i -H «Accept: application/json» «Content-Type: application/json» -X GET http://mysite.com/style/auditype-extendednormal.ttf | head

Чтобы заголовок отдавался корректно необходимо чтобы был активирован mod_headers в Apache

Читать еще: Сервис параметры запуска access

Он активируется командой

После активации модуля веб-сервер необходимо перезагрузить

Access control allow origin может задаваться в конфигурации Apache, но обычно это делается через файл .htaccess способом приведенным в первой части данного материала

fastcodenote

Страницы

вторник, 11 февраля 2014 г.

CORS. Как посылать запросы GET, POST, DELETE etc.

В наши дни не знать что такое CORS (wiki), сродни прогулки тёмной ночью по последнему этажу, недостроенной высотки где-нибудь за городом, в неблагополучном районе. Т.е. смертеподнобно, а особенно если вы фронт-енд разработчик.

Более подробно вы можете ознакомиться перейдя по ссылкам в конце текста, я же скажу вкратце, CORS это набор HTTP заголовков, которые позволяют объяснить браузеру и серверу, что они хоть и из разных доменов, но ~~одной крови~~ работать могут вместе. Т.е. кросс-доменные зпросы поддерживаються. Кто не знает, то запрос из браузера посредством старого, доброго JavaSctipt недавно, так на чистоту, без костылей сделать было невозможно. Ура, эти мрачные времена канули в лету. Пришёл на момощь CORS.

Речь пойдет именно о процессе использования и базовой настройки заголовков сервера, и отсыла запросов клиента с использованием jQuery.

Сервер, который мнит себя крутым сервисом, настолько куртым что хочет предоставить поддержку кросс-доменных запросов. Должен клинету сообщить об этом. Отправив следующие заголовки:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers

Это тот минимум, который необходим для успешной работы наших кросс-доменных запросов. немного рапишем что, к чему:

Access-Control-Allow-Origin — (обязательный) собственно список разделенный пробелами допустимых доменнов (источников), которые будут ~~ломиться~~ делать запросы к нам на сервер. Из особенностей: регистрозависим, поддерживает маски, например, http://api.superservice.com/, http://*.superservice.com/ или, как вы могли догадаться просто «звездочка» *. Этот заголовок будет сравниваться с заголовком Origin клиентского запроса.
Access-Control-Allow-Method — (обязательный) это список доступных HTTP методов, разделенных запятыми. Особое внимание стоит уделить тому, что «звездочка» аля * работать не будет!
Access-Control-Allow-Headers — (обязательный вместе с Access-Control-Request-Headers) список через запятую заголовков разрешенных в запросе.

Пример настройки для Apache:

Давайте разберемся, что тут происходит? А происходит следующее, запросы будут обработанны с любого источника, если они будут одного из перечисленных в Header always set Access-Control-Allow-Methods типов, так же будут подерживаться заголовки X-Requested-With и content-type

Тот же пример для PHP

Теперь, предположим, что сервис у нас крутится по адресу http://api.superservice.com/ , а GET запрос нам надо сделать со странички http://pure.client.net/. Это не сложно сделать, к примеру с jQuery:

Думаю самое время упомянуть о неприятном моменте с AngularJs если вам понадобиться сделать кросс-доменый запрос с помощью $http или $resource, то надо будет удалить один заголовок, делается это так:

Такое поведение странно, для меня, по крайней мере, несмотря на то что заголовок X-Requested-With вы укажите Access-Control-Allow-Headers не исключены проблемы с запросами. Ходят слухи что это бага AngularJs, кому интересно, если найдете что, отпишитесь в коментах.

Переходим к интересным запросам типа POST/PUT/DELETE, всех их объединяет то что они пытаются что-то изменить на сервере. Но как сделать такой запрос кросс-доменным? Сначала надо получить список заголовков типа Access-Control-*, делается это предварительным OPTIONS запросом. Который может вернуть тот же набор Access-Control-*, что и обычный метод GET.

На сервере если вы больше нигде и не для чего более не будете использовать OPTIONS запросы, то можете смело на все запросы типа OPTIONS отвечать необходимыми заголовками в том числе и такими заветными для нас как CORS заголовки. Если кто не понял то имееться ввиду добавить правило для всех запросов типа OPTIONS в роутах вашего любимого фреймворка. Или же сделать обработку руками.

Этот предварительный запрос (prefligth-запрос), делается автоматически jQuery или тем же Angular, по-тому же URL что и ваш основной запрос POST/PUT/DELETE поэтому будте внимательны если вы не сделаете правильной обработку запросов типа OPTIONS то и запрос POST/PUT/DELETE у вас сделать не получиться, из-за политики безопасности, который следуют браузеры.

Пример запроса POST с использованием jQuery.

Я старался изложить кратко, в справочном виде, не очень получилось :), но думаю многим кто прочитал это сэкономит время. Ниже список источников, который позволят вам более глумого изучить вопрос CORS