角度設定のHTTPリクエストの起点がnullの場合

Question

しばらくの間、私は地元の角度ビルドをHTTPSで提供するように努力していました（覚えておいて、最後のSSL問題に遭遇することはないでしょうか？アプリ）。しかし、成功しなかったのですが、私はng serveを使用しました。しかし、すべてのAJAXリクエストは失敗しています。私はスリムAPIを提供するローカルVMを実行し、CORSの設定を持っています。しかし、私は次のエラーを見ました：ネットワーク]タブでコールを見てみると

The 'Access-Control-Allow-Origin' header has a value 'http://gamersplane.local' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. 

を、私は元のヘッダーが実際にnullであることがわかり、そして私のコードを見、私は元のヘッダーと混乱しません（できるかどうかわからない？）。私はAuthorizationヘッダーを設定しますが、それはありますか？ここにAPIサービスがあります：

private addToken(headers: HttpHeaders) { 
    let token = localStorage.getItem('token'); 
    if (token) { 
     headers = headers.set('Authorization', 'Bearer ' + token); 
    } 
    return headers; 
} 

private constructParams(data?: Object) { 
    // Object.keys(data).reduce((params, key) => params.set(key, data[key]), new HttpParams()); 
    let params = new HttpParams(); 
    for (let key in data) { 
     if (typeof data[key] !== 'object') { 
      params = params.set(key, data[key]); 
     } else { 
      for (let oKey in data[key]) { 
       params = params.set(key + '[' + oKey + ']', data[key][oKey]); 
      } 
     } 
    } 

    return params; 
} 


get<T = any>(path: string, data?: Object): Observable<T> { 
    let headers = new HttpHeaders(); 
    headers = this.addToken(headers); 
    return this.http 
     .get<T>(environment.apiDomain + path, { 
      headers: headers, 
      params: this.constructParams(data) 
     }); 
} 

アドバイスはありますか？

Answer 1

これは角度の問題ではありません。私はに、すべての起源がバックエンドにアクセスできるようにしてください。原点ヘッダーを*に設定するだけです。

あなたはまた、あなたの通話のためのプロキシを作成することができます

proxy.conf.json設定で周り

{ 
    "/api": { 
    "target": "http://1.2.3.4:5/", 
    "secure": false, 
    "changeOrigin": true, 
    "logLevel": "debug" 
    } 
} 

フィドルを、それを把握you'ff。プロキシと

あなたが仕える

、

$ ng serve --proxy-conf ./proxy.conf.json 

、サーバーは（NGサーブ）ので、クロスオリジンの制約に準拠する必要がなくなり、代わりにバックエンドの要求を行います。

今、あなたのサービスでURLが

let url = 'http://1.2.3.4:5/api/' 

しかし、単に

let url = '/api/' 

されず、プロキシはあなたのためにこれを処理します。

Answer 2

サーバーが302リダイレクトで応答すると、Chromeはバグがあります。新しいリクエストを作成すると、Originヘッダーがnullに設定されます。私の場合は、APIが307で応答していたため、リクエストがnullに設定されていました。 307を修正しました（これは奇妙な問題のようですが...）