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

Question

Я пытаюсь, но не могу сделать запрос 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 действителен, потому что я могу запустить запрос get с ним в Postman.

Я использую 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, и для правильного выполнения запроса get мне нужно было использовать https, поэтому я создал файл bs.config.json. npm-lite позволяет нам использовать параметры из синхронизации браузера для запуска. Я установил для https значение true, чтобы приложение могло работать по протоколу https.

шс-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 http или что-то неправильно понимаю. Спасибо!

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

РЕДАКТИРОВАТЬ 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. Ответ на предпечатную проверку недействителен (перенаправление)

Answer 1

Таким образом, конечной проблемой было то, что серверы 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);
    });     
}

Answer 2

Пожалуйста, установите тип содержимого 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');