Ошибка заголовка Angular2 bit.ly 'Access-Control-Allow-Origin'

Question

Я пытаюсь заставить работать bit.ly API, но я застрял в проблемах с CORS. Я проверил все источники, которые мог, но проблема остается.

Код Angular2:

getBitLyUrl (fullUrl : string): Observable<string> {


   let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' }); 
   let options = new RequestOptions({ headers: headers }); 


   let res =  this._http.get('https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=' 
                  + fullUrl + '&format=json', options)
        .map((response: Response) => response.json());

    return res;
}

Заголовки из Chrome Network:

General:
Request URL:https://api-ssl.bitly.com/v3/shorten?      access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma  .net&format=json
 Request Method:OPTIONS
 Status Code:200 OK
 Remote Address:67.199.248.20:443


Response:
Allow:GET, POST, OPTIONS
Connection:keep-alive
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Wed, 25 Jan 2017 10:22:31 GMT
Server:nginx

Request:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en,cs;q=0.8,sk;q=0.6,de;q=0.4
Access-Control-Request-Headers:access-control-allow-origin, x-xsrf-token
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:api-ssl.bitly.com
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,   like Gecko) Chrome/55.0.2883.87 Safari/537.36

Я получаю эту ошибку:

XMLHttpRequest не может загрузить https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma.net&format=json. Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник ' http://localhost:3000/', следовательно, не имеет доступа.

Любая помощь будет высоко оценен!

Answer 1

Просто удалите аргументы заголовков и опций из функции get

Answer 2

let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' });, Это заголовок ответа. CORS настроен для безопасной защиты внутреннего сервера, поэтому эти заголовки должны быть заданы внутренним сервером в ответ. Если вы не контролируете сервер, нет возможности получить к нему доступ из перекрестного источника, если они не одобрили ваш домен.

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

Стандарт Cross-Origin Resource Sharing работает путем добавления новых заголовков HTTP, которые позволяют серверам описывать набор источников, которым разрешено читать эту информацию с помощью веб-браузера. Кроме того, для методов HTTP-запросов, которые могут вызывать побочные эффекты для пользовательских данных (в частности; для методов HTTP, отличных от GET, или для использования POST с определенными типами MIME). Спецификация требует, чтобы браузеры "предварительно отправляли" запрос, запрашивая поддерживаемые методы у сервера с заголовком запроса HTTP OPTIONS, а затем, после "одобрения" с сервера, отправляли фактический запрос с фактическим методом HTTP-запроса. Серверы также могут уведомлять клиентов о необходимости отправки "учетных данных" (включая файлы cookie и данные HTTP-аутентификации) с запросами.