0

我正在尝试但无法执行 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);
        });
    }
}

我知道网址http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np是有效的，因为我可以在Postman中使用它运行 get 请求。

我正在使用npm-lite运行我的应用程序，它在http://localhost:3000加载

在http://localhost:3000运行会导致错误：XMLHttpRequest cannot load http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:3000 ”。

我认为问题可能是我的应用程序在 http 上运行并且需要在 https 上才能正确执行 get 请求，所以我创建了一个bs.config.json文件。npm-lite 允许我们使用browser-sync中的选项来运行。我将 https 设置为 true 以允许我的应用程序在 https 上运行。

bs-config.json

{
    "https" : true
}

现在，当我运行我的应用程序时，它将在“ https://localhost:3000 ”上运行，我收到错误消息： zone.js:101Mixed Content: The page at ' https://localhost:3000/portfolio ' was loaded over 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 cannot load https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np。预检响应无效（重定向）

4

2 回答 2

1

请在标头中设置 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');
于 2016-07-10T19:52:55.547 回答
0

所以最终的问题是 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);
    });     
}
于 2016-07-10T22:40:39.107 回答