Angular2 http.get 导致混合内容错误或无 'Access-Control-Allow-Origin' header

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);
        });
    }
}

我知道urlhttp://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np is valid because I am able to run a get request with it in Postman。

我正在使用npm-lite to run my app and it gets loaded at http://localhost:3000

运行在 http://localhost:3000 results in the error : XMLHttpRequest cannot load http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' 因此不允许访问。

我认为问题可能是我的应用程序在 http 上运行ning 并且需要在 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' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np”处的页面。此请求已被阻止；内容必须通过 HTTPS 提供。

我不确定如何从这里开始。如果我正确设置了 http get 请求，或者我是否误解了什么，请告诉我。谢谢！

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

编辑 1：响应@AngJobs 的建议：只需在跨浏览器请求中添加一个特殊的 header

我在请求中添加了一个header：

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 but now get the error: XMLHttpRequest cannot load https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np 回到运行ning。预检响应无效（重定向）

Answer 1

请在 header 中设置 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');

Answer 2

所以最终的问题是雅虎服务器没有验证 CORs。解决这个问题的一个简单方法是使用 proxy。我现在使用的是：https://crossorigin.me/. In order to use this proxy, I just need to append the request url with https://crossorigin.me/。

无需扰乱请求 headers，我可以在 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);
    });     
}

Angular2 http.get 导致混合内容错误或无 'Access-Control-Allow-Origin' header

Angular2 http.get results in a Mixed Content error or No 'Access-Control-Allow-Origin' header

mixed-content

browser-sync

angular2-http

lite-server

angular