Spring Boot のフロントエンドとバックエンドの分離開発モードでクロスドメインの問題を解決する

実際の開発では、フロントエンドの Vue アプリケーションとバックエンドの Spring Boot API インターフェイス間のクロスドメインアクセスの問題に遭遇することがよくあります。このブログでは、Spring Boot フロントエンド Vue のクロスドメイン問題を解決する実践的な経験を共有し、開発者がこの問題を迅速に解決できるように支援します。

1. クロスドメイン問題の原因

クロスオリジンの問題は、ブラウザーの同一オリジンポリシーによって発生します。同一オリジンポリシーは、あるオリジンからロードされたドキュメントまたはスクリプトが別のオリジンのリソースと対話する方法を制限します。プロトコル、ホスト名、またはポート番号が異なる場合、ブラウザはこれがクロスドメインアクセスであると判断し、リクエストを拒否します。

2、解決策

1. バックエンドの構成

Spring Boot バックエンドプロジェクトでは、クロスドメイン構成を追加することで、フロントエンド Vue アプリケーションのクロスドメインリクエストを許可できます。

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

上記のコードでは、@Configurationアノテーションを使用して構成クラスをマークし、WebMvcConfigurerインターフェイスを実装しています。このメソッドでは、すべてのソース ( )、すべての HTTP メソッド ( )、すべてのリクエストヘッダー ( )、Cookie のクロスドメイン伝送のサポート ( )、およびキャッシュ時間 ( )addCorsMappingsを許可するように構成されています。allowedOrigins("*")allowedMethods("*")allowedHeaders("*")allowCredentials(true)maxAge(3600)

2. フロントエンド構成

Vue フロントエンドプロジェクトでは、vue.config.js構成ファイルを通じてクロスドメインの問題を解決できます。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target 'http://localhost:8080',  // 后端API接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

上記のコードでは、devServer構成アイテムのproxyプロパティを使用してエージェントを構成します。リクエストパス内で始まるリクエストを、api指定されたバックエンド API インターフェイスアドレス (ここではhttp://localhost:8080) にプロキシします。changeOriginに設定すると、trueクロスドメインが有効になります。

3. 実践例

実際の開発では、次の例を使用して、Spring Boot 側で Vue のクロスドメインの問題を解決する実際の経験を実証できます。

バックエンドコードの例:

@RestController
@RequestMapping("/api")
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}

```javascript
axios.get('/api/hello')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

上記の例では、バックエンドは単純なインターフェイスを提供し/api/hello、フロントエンドはaxiosGET リクエストを送信してデータを取得します。

4. まとめ

このブログでは、Spring Boot フロントエンド Vue のクロスドメイン問題を解決した実践体験を紹介し、バックエンドとフロントエンドの構成例を示します。バックエンドとフロントエンドを構成することで、クロスドメインの問題を簡単に解決し、通常のフロントエンドとバックエンドの対話を実現できます。この記事が開発者にとって役立つことを願っています。皆さんもぜひ拡散して共有してください。

上記の内容は参考用であり、具体的な状況は実際のプロジェクトに応じて調整する必要があります。より良い解決策がある場合は、議論するメッセージを残してください。