フロントエンドとバックエンドから分離された Springboot プロジェクトがクロスドメインの問題を解決します

フロントエンドとバックエンドを分離してプロジェクトを作成するときに、フロントエンド プロジェクトがデータをキャプチャするリクエストをバックエンドに送信するときに、多くの友人が間違いなくクロスドメインの問題に遭遇すると思います。最近、私自身もこの問題に遭遇したので、今日はその解決策を共有したいと思います。
まず、ここから説明させていただきます。私のフロントエンド プロジェクトでは、Element-UI バックエンド Springboot フレームワークとともに Vue フレームワークを使用しています。

フロントエンドで Element-UI フォーム コンポーネントを使用してフォームをバックエンドに送信するときに、クロスドメインの問題が発生します。
フロントエンド フォーム送信のコードは次のとおりです。

<script>
submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("submit")
                        this.$axios.get("http://localhost:9000/Client/hello"
                        ).then( (rep) => {
                            if(rep.data == "hello"){

                                alert('submit!');
                            }else {
                                alert("账号或者密码错误")
                            }
                            console.log(rep)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
</script>

以下の図は、ブラウザがリクエストを送信したときにコンソールに報告されるクロスドメインの問題を示しています: インターセプトされた
クロスオリジン リクエスト: 同一オリジン ポリシーにより、http://localhost:9000/admin/hello にあるリモートの読み取りが禁止されています。) 注 2. WebMvcConfigurerAdapter

クラスを
書き換えます。

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

3. Nginx リバース プロキシを構成し、フィルターを通じて応答ヘッダーを手動で追加します

public class HeaderFilter implements Filter {
 // private Logger logger = Logger.getLogger(HeaderFilter.class);

 public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain)
   throws IOException, ServletException {
  HttpServletResponse response = (HttpServletResponse) resp;
  response.setHeader("Access-Control-Allow-Origin", "http://106.14.135.196:88"); // 解决跨域访问报错
  response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
  response.setHeader("Access-Control-Max-Age", "3600"); // 设置过期时间
  response.setHeader("Access-Control-Allow-Credentials", "true");
  response.setHeader("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP
                     // 1.1.
  response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0.
             // response.setHeader("Expires",
             // "0");
  chain.doFilter(request, resp);
 }

 public void init(FilterConfig filterConfig) {
 }

 public void destroy() {
 }
}

しかし、さまざまな方法を試してみましたが、問題は解決できず、最終的に 2 番目の方法を使用したときに、インターネット上でコピーされると言われていた WebMvcConfigurerAdapter クラスが実際には放棄されていることがわかり (おそらく、私が閲覧した投稿が 2015 年のものだったためでしょう)、Web 構成クラスをコピーするという考えに沿った最終的な解決策、つまり WebMvcConfigurer インターフェースをコピーすることを見つけました。

@Configuration
public class WebConfig implements WebMvcConfigurer {
    //     跨域支持
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH", "OPTIONS", "HEAD")
                .maxAge(3600 * 24);
    }
}