Angular2 http.get приводит к ошибке смешанного содержимого или отсутствию заголовка «Access-Control-Allow-Origin»

Я пытаюсь, но не могу выполнить запрос http.get.

Ниже приведены соответствующие части Service, которые я использую.

import { Injectable } from '@angular/core';
import { Http, Response, Headers,RequestOptions } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class StockService {

constructor(private http: Http) { }

    getStocks() {
        var url = "http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
        this.http.get(url).toPromise().then(function(info){
            console.log(info);
        });
    }
}

Я знаю, что URL http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np действителен, потому что я могу выполнить запрос на получение с ним в Почтальон.

Я использую npm-lite для запуска своего приложения, и оно загружается в http://localhost:3000

Выполнение на http://localhost:3000 приводит к ошибке: XMLHttpRequest не может загрузиться http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, доступ к источнику 'http://localhost:3000' запрещен.

Я подумал, что проблема может заключаться в том, что мое приложение работает по http и должно быть по https, чтобы правильно выполнить запрос на получение, поэтому я создал файл bs.config.json. npm-lite позволяет нам использовать параметры browser-sync для запуска. Я установил для https значение true, чтобы мое приложение могло работать на https.

bs-config.json

{
    "https" : true
}

Теперь, когда я запускаю свое приложение, оно будет работать на 'https://localhost:3000', и я получаю сообщение об ошибке: zone.js:101Смешанный контент: страница 'https://localhost:3000/portfolio' была загружена более HTTPS, но запросил небезопасную конечную точку XMLHttpRequest 'http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np'. Этот запрос был заблокирован; контент должен передаваться через HTTPS.

Я не уверен, как действовать дальше. Пожалуйста, дайте мне знать, правильно ли я настраиваю запрос http get или я что-то неправильно понимаю. Спасибо!

============================================

РЕДАКТИРОВАТЬ 1: в ответ на рекомендацию @AngJobs: просто добавьте специальный заголовок в свой запрос для межбраузерного запроса

Я добавил заголовок в запрос:

getStocks() {
    var url = "http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*'});
    let options = new RequestOptions({ headers: headers });
    this.http.get(url, options).toPromise().then(function(info){
        console.log(info);
    });
}

Я снова работаю на http://localhost:3000, но теперь получаю сообщение об ошибке: XMLHttpRequest не может загрузить https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np. Недопустимый ответ на предварительную проверку (перенаправление)


angular mixed-content browser-sync lite-server angular2-http
person Rohan    schedule 10.07.2016    source источник
comment
Верните https : false   -  person null canvas    schedule 10.07.2016
comment
И устраните ошибку No 'Access-Control-Allow-Origin', просто добавьте специальный заголовок в свой запрос для кросс-браузерного запроса.   -  person null canvas    schedule 10.07.2016
comment
привет @AngJobs Спасибо за предложение. Я попробовал это, но я получаю другую ошибку. Пожалуйста, проверьте мое последнее редактирование, чтобы увидеть реализацию   -  person Rohan    schedule 10.07.2016
comment
Все это связано с политикой CORS.   -  person null canvas    schedule 10.07.2016

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, установите тип содержимого http в заголовке, а также убедитесь, что сервер аутентифицирует CORS

 //NOT A TESTED CODE
    header('Content-Type: application/json;charset=UTF-8');
    header('Access-Control-Allow-Origin': '*');
    header('Access-Control-Allow-Methods: DELETE, HEAD, GET, OPTIONS, POST, PUT');
    header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
    header('Access-Control-Max-Age: 1728000');
person null canvas    schedule 10.07.2016

arrow_upward
0
arrow_downward

Таким образом, основная проблема заключалась в том, что серверы Yahoo не аутентифицировали CORs. Простое решение для решения этой проблемы — использовать файл proxy. Сейчас я использую: https://crossorigin.me/. Чтобы использовать этот прокси, мне просто нужно добавить URL-адрес запроса с https://crossorigin.me/.

Нет необходимости возиться с заголовками запросов, и я могу продолжать запускать приложение на http:localhost.

getStocks() {
    var url = "https://crossorigin.me/https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
    this.http.get(url).toPromise().then(function(response){
        console.log(response._body);
    });     
}
person Rohan    schedule 10.07.2016