完璧な解決策: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。

既解：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません

目次

1.問題の説明

2.解決プロセス

---

1.問題の説明

フロントエンドは vue、バックエンドは springcloud です。フロントエンドとバックエンドは完全に別のプロジェクトです。フロントエンドがバックエンドにリクエストを送信すると、次のエラーが発生します。No 'Access- Control -Allow-Origin' ヘッダーが要求されたリソースに存在します。

2.解決プロセス

分析: インターフェイスをリクエストすると、Access-Control-Allow-Origin などの単語が表示され、リクエストがクロスドメインであることを示します。では、クロスドメインとは何でしょうか?

JavaScript を使用するすべてのブラウザは、同一生成元ポリシーをサポートします。同一生成元ポリシーとは、ドメイン名/プロトコル/ポート番号が同じであることを意味します。相違点が 1 つある限り、それはクロスドメイン リクエストとみなされます。

オプション 1: バックエンド インターフェイスを次のように構成します。

 オプション 2: フロントエンドでプロキシを設定できます

プロジェクトのルート ディレクトリに新しいファイルを作成しvue.config.js、そのファイルに構成を追加します

module.exports = {
    devServer: {
        proxy: {
            '/test': {
                target: 'https://baidu.com',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/test': '' //遇到接口路径有test的，就换成http://www.baidu.com/这个请求头，同时把test去掉
                }
            }
        }
    },
}

仕事で遭遇した問題とその解決過程を記録しており、皆様のお役に立てれば幸いです！