角2には「アクセス制御 - 許可 - 起源」ヘッダが、カールは罰金

Question

に動作します私は角度2を使用してアプリケーションを開発していますし、私はAPI呼び出し作るしようとしたとき、私は次のエラーを見つける：

をXMLHttpRequestはhttp://localhost:9090/confをロードできません。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'http://localhost:5555'はアクセスできません。ここで

、私の呼び出しの2つの例があります。私はそれが動作のcURLを使用する場合

import { Http, Response } from '@angular/http'; 

// ... 

@Injectable() 
export class ConfService { 

    // ... 

    getConf(): Observable<string[]> { 
    return this.http.get(
         'http:localhost:9090/conf?id=1', 
         { 
         headers: { 
          'Accept': 'application/json;charset=UTF-8' 
         } 
         } 
        ) 
        .map((res: Response) => res.json()) 
        .catch(this.handleError); 
    } 

    setConf(conf: any[]): Observable<string[]> { 
    return this.http.get(
         'http:localhost:9090/conf?id=1', 
         conf, 
         { 
         headers: { 
          'Content-Type': 'application/json;charset=UTF-8' 
         } 
         } 
        ) 
        .map((res: Response) => res.json()) 
        .catch(this.handleError); 
    } 

} 

は、しかし！

$ curl -XPUT 'localhost:9090/configuration?id=1' \ 
> -H 'Content-Type: application/json' 
> -d '{"conf":1234}' 
Success! 
$ curl -XGET 'localhost:9090/conf?id=1' 
{"conf":1234} 

ここで何が起こっているか

ありがとう

Answer 1

ブラウザのセキュリティ、ブラウザの一般的なCORSの問題です。あなたのWebアプリケーションはlocalhost：5050、serverはlocalhost：9090で動作しています。ブラウザは、異なるポート番号を持つ別のホストにアクセスすることを許可しません。解決策はサーバー（つまり、localhost：9090で実行しているアプリケーション）のCORSを処理することです