開発者日記:day 15

2021年07月26日月曜日晴れ
暑すぎて...エレベーターを待っている間に、汗で顔を洗ったようです.東南アジアもそんなに暑くない.
Today, I learned...
今日、Angular-springfoot 2 TOYプロジェクトはさらに発展しました.その過程で出てきた、今日は超えていないミスを紹介したいと思います.それぞれ地元でフロントとバックグラウンドを開発した人は、私と似たような状況を経験したことがあるかもしれません.これが「ソース間リソース共有」エラーです.
localhost:4200でフロントエンドのデバッガを実行し、localhost:8080で白人springブートを実行します.問題は、フロントがバックグラウンドに要求すると、上記のCORSポリシーに違反するため、バックグラウンドはフロントにデータを送信しません.私が試した方法は以下の通りです.

Spring Bootで構成クラスを作成し、アプリケーション全体で4200ポートと通信できるようにする

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**").allowedOrigins("http://localhost:4200");
        WebMvcConfigurer.super.addCorsMappings(registry);
    }
}

ばね起動RESTコントローラ4200ポートとの通信を可能にする

@RestController
@RequestMapping("/api/v1/")
@CrossOrigin(origins = "http://localhost:4200")
public class UserController {
	
    ...
    
}

で藁をつかむ気持ちで、フロントエンドの桜機でHTTPインターフェースを実現し、送信する頭に「Access Control-Allow-Origin」を追加(事実上、この頭はバックエンドサーバに追加すべきだったのですが、本当に何時間探しても見つからず、藁をつかむような感じ…)

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (req) {
      console.log('HTTP Interceptor');
      console.log(JSON.stringify(req));
      req = req.clone({
      headers: req.headers.set('Access-Control-Allow-Origin', 'http://localhost:8080')
      });
    
    ...

}

stackoverflow記事、ブログの位置づけ、海外サイトの整理記事を大量に読んだが、問題は解決できなかった.不思議なことに、数日前にコントローラに@CrossOriginを追加して問題を解決し、Spring Securityをスキップしました.つまり、xmlやGoogleへのログインに追加すると、CORSエラーが発生します.
検索結果に次のことがわかります.
1)CORSポリシーに違反しているか否かを判断するのはブラウザによるものである.(フロントまたはバックグラウンドでデータが正常に転送され、データがフロントに転送されたがブラウザのポリシーに違反した場合、これらのデータは破棄されます.つまり、ブラウザを介してサーバ間で通信しなければ、CORSなどを考慮する必要はありません.)
2)要求が発行されると、要求はすぐに発行されるのではなく、pre-flightという代替要求が発行され、それからこの要求が発行される(ブラウザがこの要求を発行する前に、OPTIONSヘッダを使用して小さな要求が送信され、要求の安全を確保する).
ブラウザの開発者ツールを開いてエラーが発生した場所を確認すると、localhost:8080/loginというurlが見つかりました.明らかにバックエンドコントローラに/loginと書いていませんが、なぜこれがあるのでしょうか.好奇心からブラウザにurlを入力すると、非常に簡単なログイン画面が表示されます.
推測1)spring securityを導入して作成した2)spring Bootでデフォルトで提供されているログインページ3)は、Googleのログインを実現するために作成されたものである(コンソールはユーザ情報と顧客情報のみを持ってきており、実際には実現していない部分をプロジェクトに明記している).
突然発生した/loginが混乱しているため、明日サーバーの応答ヘッダに「Access Control Allow-Origin」を追加したり、私の/loginページとURLを検索したりします.
おかげさまで、今日勉強したSpringTestとJUnitは、明日もう一度整理して、文章を書くつもりです.もう一つの目標は、2年以内にクラウド関連資格(AWS、Azure certificateなど)を取得することです.難易度はわかりませんが、AWSを基準にして、ほぼ合格しやすいと思います.目標は同僚や専門レベルの等級を追求することです.業務で2~3年働いてこそ達成できるレベルなので、挑戦してみたいと思います.
Tomorrow, I will...
明日私は.必ずCORS問題を解決しなければならない.そして今日勉強したSpringTestとJUnitを整理