Help us understand the problem. What is going on with this article?

tomcatのcors設定に手こずった件

経緯

先日学校課題をReactを用いてAPIサーバとして作成していました。
学校としてはJavaを使用した課題だったため、やむを得なくServletとTomcatを用い制作していましたがFetchでクッキー等を扱った受け渡し処理をする盛大にハマって4日間ぐらい座学を挟んだので纏めておこうと思います。

なぜハマったのか

スクリーンショット (73).png

このような形で、やり取りを試みたわけですがFetchAPIを検索しcredentialsが自分の頭では理解ができなかったのでハマってしまいました。

そもそもCORSって?

オリジン間リソース共有 (CORS) - MDN web docs
CORS(Cross-Origin Resource Sharing)について整理してみた - Developers.IO
Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト

こいった座学は得意じゃないのです。

同一生成元ポリシーをあえて無視する以上、悪意を持った第三者からの攻撃を受けるリスクが高くなる可能性があります。
こうした状況の中で、より手軽に、より安全にクロスドメインアクセスを実現したいという要求に応えるために作られたのがCORSです。
Developers.IO

詰まる話セキリュティ的にマズいのであえて制限をかけ、一部開放する形にしているらしいです。

HTTPプロトコルのヘッダー情報を書き換える必要があるらしいです。

実践編 Tomcatを許可しよう。

サーバー側

FillterServlet.java
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse res = (HttpServletResponse) response;
    // 許可したいドメインの追加
    res.setHeader("Access-Control-Allow-Origin", "http://192.168.44.55:3000");
    // 認証情報やCookieのやりとりをする際にはCredentialsをTrueにする必要がある。
    res.setHeader("Access-Control-Allow-Credentials","true");
    // 実行可能なHTTPメソッドの追記
0   res.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE, OPTIONS");
    // よくわからないけど追記
    res.setHeader("Access-Control-Allow-Headers", req.getHeader("Access-Control-Request-Headers"));
}

注意点
Fillterに記述するように書きましたが、本来はServletに記載すべき項目です。(HttpServletRequest,Responseのため)

クライアント側

ajax.js
fetch(
  "URL",{
    // クロスドメインのため、modeをcorsに設定
    mode:'cors',
    // セッションなどを保持する
    credentials: "include"
    }
 }
)

credentialsの設定項目

  • mit:決してクッキーを送信しない。
  • same-origin:URL が呼び出し元のスクリプトと同一オリジンだった場合のみ、クッキーを送信する。
  • include:クロスオリジンの呼び出しであっても、常にクッキーを送信する。

今回したい事はincludeによる実装です。

ここでハマりポイント

自分のしていた設定

FillterServlet.java
res.setHeader("Access-Control-Allow-Origin", "*");

エラーログで流れますがワイルドカードは選択するとfetch側で弾かれます。
尚且つ
res.setHeader("Access-Control-Allow-Credentials","true");
を設定しておらず、永遠とクッキーが取得できないまま悶々としていましたが、こういったしょうもない部分でハマりますので座学はやっぱり結構大事だなと思いました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away