角度GET要求CORS

Question

は、これは私のサービス

import { Injectable } from '@angular/core'; 
import { HttpModule,Http } from '@angular/http'; 
import { HttpClientModule } from '@angular/common/http'; 

@Injectable() 
export class MyDataServiceService { 

    constructor(private http:Http) {} 

    getData(){ 
    return this.http.get('http://stats.nba.com/stats/leaguedashplayerbiostats/?PerMode=Totals&Season=2016-17&LeagueID=00&SeasonType=Playoffs'); 
    } 

}

ですなぜ私は、ブラウザから要求した場合、私は情報を取得することができますし、私は、角のアプリの応答から要求したときにロックされているCORSヘッダー理由お見逃しですか？ フロントエンドから修正できますか？

Answer 1

CORSは通常サーバー側の問題です。サーバーは、クライアントがアクセスできるようにクライアントを認証する必要があります。しかし、ブラウザで動作するとすれば、おそらくCORSが実装されているはずです。 Postmanのようなプログラムを使ってリクエストを送信し、次のことが起こっているかどうかを確認することができます。

ブラウザは、リクエストの前にプリフライトリクエストを送信します（または、郵便配達員経由で手動で送信することもできます）。これは、サーバがあなたが呼び出しようとしているHTTPメソッドをサポートしていることを確認するためです。上記の行が存在する場合

Access-Control-Allow-Origin: * 

：

Origin: http://foo.example 

、サーバがCORS実装していると仮定すると、それはヘッダにこれに戻ってくる：プリフライトリクエストは、オリジン・ヘッダを含むであろう、問題はないはずです。したがって、角型アプリケーションでは、最初のコードスニペットを含める必要があり、サーバーは2番目のスニペットを返す必要があります。バックエンドにアクセスできる場合は、2番目のスニペットがレスポンスに挿入されていることを確認してください。

プリフライト要求と応答交換は、次のようになります（ビューfull post）。 私はまた、this articleから多くのことを学んだ

プリフライトリクエスト：

OPTIONS /resource/foo 
Access-Control-Request-Method: DELETE 
Access-Control-Request-Headers: origin, x-requested-with 
Origin: https://foo.bar.org 

応答：

HTTP/1.1 200 OK 
Content-Length: 0 
Connection: keep-alive 
Access-Control-Allow-Origin: https://foo.bar.org 
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE 
Access-Control-Max-Age: 86400 

は、だからあなたのアプリで、あなたは以下のリクエストとレスポンス等Origin : http://your.domain種類を含める必要が

：

GET /resources/public-data/ HTTP/1.1 
Host: bar.other 
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html 
Origin: http://foo.example 


HTTP/1.1 200 OK 
Date: Mon, 01 Dec 2008 00:23:53 GMT 
Server: Apache/2.0.61 
Access-Control-Allow-Origin: * 
Keep-Alive: timeout=2, max=100 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: application/xml 

[XML Data] 

Answer 2

CORSヘッダーは、通常、後端側から一部です。 you`reが良いジャンゴを使用している場合

pip install django-cors-headers 

https://github.com/ottoyiu/django-cors-headers

[AngularJsでCORSを有効にする方法]の