web-dev-qa-db-ja.com

Angular HttpClientはPOSTを送信せず、OPTIONSを送信します

Angular HttpClient（および英語も書く）を使用するIm '初心者

問題があります。POSTトークンオブテンクションをネゴシエートするために、OAuthメソッドを使用してHTTPリクエストを送信しようとしていますが、angular = OPTIONSリクエストを送信します：

サービス：

login(username: string, password: string) {
const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD)
  })
};  


return this.http.post<string>(AuthenticationService.AUTH_TOKEN, body, httpOptions);

結果：

enter image description here

バックエンドにはSpringSecurityを使用しており、CORSを許可するフィルターを追加しました。

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}
angularspring-securityoauth-2.0angular5spring-security-oauth2
4
Jose A. Matarán

angular関連ではなく、ブラウザが行っています。

この問題を確認してください 。

サーバーはlocalhost：8080で実行され、angularアプリケーションはlocalhost：4200）であると想定します。リクエストはクロスオリジンリクエストであるため、ブラウザは最初にOPTIONSリクエストをに送信します。安全かどうかを確認します。この時点で、サーバーはhttpコード401で応答を返し、POSTリクエストが行われないようにします。サーバーで設定を行うか、Webpackプロキシを使用できます。これはあなただけのものです。ローカルマシン。バンドルされたangularアプリケーションをサーバーから提供する場合は、本番環境で何もする必要はありません。私はこの手法をかなり前から使用しており、機能します。大丈夫です。

例、

ユーザーはmydomain.com/ng-appから私のangularアプリケーションにアクセスします。同じドメインmydomain.com/apiから残りのAPIも提供します

そのため、私のアプリケーションは常に、サービスが提供されているサーバーにリクエストを送信します。これにより、本番環境で問題が発生することはありません。

後者の場合、次のことができます

プロジェクトのルート（_proxy.conf.json_の隣）に_package.json_を作成し、以下を内部に配置します

_{
    "/api/": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true
    }
}
_

Package.jsonで、startスクリプトを編集し、_ng serve --proxy-config proxy.conf.json_にします。

また、フロントエンドからlocalhost：8080に直接リクエストを送信しないでください。代わりに、http.post('/api/getSomeData')のようなものを記述して、localhost：4200にリクエストを送信し、localhost：8080にリダイレクトします。このように、CORSに対処する必要はありません。

11
Bunyamin Coskuner

Spring Bootアプリケーションの場合、corsリクエストを有効にするには、それぞれのコントローラーで@CrossOrigin（origins = "*"、maxAge = 3600）を使用します。

これを参照

0
Chintan Pandya

angular cli configuration https://angular.io/guide/build#proxying-to-a-backend-server

0
Mahmoud Hboubati