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

Postmanで get リクエストを実行できるため、URL http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=npが有効であることはわかっています。

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 で実行されており、get 要求を適切に実行するには https である必要があることが問題である可能性があると考えたので、bs.config.jsonファイルを作成しました。npm-lite を使用すると、browser-syncから実行するオプションを使用できます。アプリを https で実行できるように、https を true に設定しました。

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 リクエストを適切に設定しているかどうか、または何か誤解している場合はお知らせください。ありがとう！

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

EDIT 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 に答える