Angularクライアントからドメインの異なるRestサーバー(Java)へアクセスしようとするとCORS問題によってエラーとなります。
その対策を以下に記述します。
(サーバー側のRest API処理は通常と変わらないため省略します)
Angular側のサーバーへリクエストする処理
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class ClientService {
url = "http://XXXXX:XXXX/XXXXX"; // アクセス先
returnModel : ReturnModel; // サーバーからの戻り値
// コンストラクタ
constructor(private http: HttpClient) {}
// 送信メソッド
request(): void {
// Httpヘッダー(CORS対応でAccess-Control-Allow-Originを指定する)
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin': '*',
})
};
// 送信データ
const data = new HttpParam({
fromObject: {
value: '1000"
}
});
// サーバーへPOST
this.http.post<ReturnModel>(this.url , data, httpOptions).subscribe(h => this.returnModel = h);
}
}
サーバー側のServlet Filter
package sample.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
// サーブレットフィルタ
@WebFilter(filterName = "CorsFilter", urlPatterns = { "/*" })
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig config) {
}
// フィルター処理
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
if (response instanceof HttpServletResponse) {
// 以下の通りCORS対応のためHeaderwo指定する
HttpServletResponse http = (HttpServletResponse) response;
http.addHeader("Access-Control-Allow-Origin", "*");
http.addHeader("Access-Control-Allow-Headers", "*");
http.addHeader("Access-Control-Allow-Credentials", "true");
http.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}