JavaScript - フロントエンドとバックエンドを分離する場合、クロスドメインの問題をどのように解決しますか?

現在、ブログに取り組んでいるときは、フロントエンドとバックエンドの分離を使用し、フロントエンドとバックエンドのロジックを 2 つの別個のリポジトリに配置し、2 つのサーバーにデプロイすることを検討しています。

私のメインのドメイン名は: godtail.cn（目前使用ghost、新しいブログを書いています...)

• フロントエンドのドメイン名は: www.godtail.cn | godtail.cn | m.godtail.cn

• バックエンドのドメイン名は: api.godtail.cn

しかし、通信中に、跨域というプロンプトが表示されることがわかりました。そうですね、以前は、メインのドメイン名が同じ場合、ドメインを越えることはできないと考えていました（同じドメイン名と異なるポートもドメインを越えます）。

現在、私が知っている解決策は 2 つあります:

1. JSONP を使用する 正直に言うと、JSONP を使用するとセキュリティ上の問題が発生したり、効率が低下したりする気がします (これら 2 つの点は私の推測にすぎません)。
   推測の理由:

   • どのソースからでもアクセスできます。js インジェクションはありますか?

   • バックエンドとフロントエンドの両方を JSONP で処理する必要があります。 (書くのは楽しくないので、すべてのリクエストは JSONP を使用する必要があります)。

2. バックエンドにクロスドメインヘッダーを追加します

   • フロントエンド ドメイン名が多数ある場合、多くのドメイン名を追加して維持する必要があります。他のシステムがインターフェイスを要求する必要がある場合、クロスドメイン ヘッダーを追加しますか?対処するのは簡単ではありません...

誰かがより良い解決策を持っていますか?

================【9-22 17:25】======================

さらに、クロスドメインヘッダーを設定すると、内部通話のみのIPを設定できます。外部呼び出しが必要な場合は、古いバージョンのブラウザとの互換性の問題があるかどうかもわかりません。

返信内容:

現在、ブログに取り組んでいるときは、フロントエンドとバックエンドの分離を使用し、フロントエンドとバックエンドのロジックを 2 つの別個のリポジトリに配置し、2 つのサーバーにデプロイすることを検討しています。

私のメインのドメイン名は: godtail.cn（目前使用ghost、新しいブログを書いています...)

• フロントエンドのドメイン名は: www.godtail.cn | godtail.cn | m.godtail.cn

• バックエンドのドメイン名は: api.godtail.cn

しかし、通信中に、跨域 というプロンプトが表示されることがわかりました。メインのドメイン名が同じ場合、ドメインを越えることはできないと以前は考えていました (同じドメイン名と異なるポートもドメインを越えます)。

現在、私が知っている解決策は 2 つあります:

1. JSONP を使用する 正直に言うと、JSONP を使用するとセキュリティ上の問題が発生したり、効率が低下したりする気がします (これら 2 つの点は私の推測にすぎません)。
   推測の理由:

   • どのソースからでもアクセスできます。js インジェクションはありますか?

   • バックエンドとフロントエンドの両方を JSONP で処理する必要があります。 (書くのは楽しくありませんし、すべてのリクエストは JSONP を使用する必要があります)。

2. バックエンドにクロスドメインヘッダーを追加します

   • フロントエンド ドメイン名が多数ある場合、多くのドメイン名を追加して維持する必要があります。他のシステムがインターフェイスを要求する必要がある場合、クロスドメイン ヘッダーを追加しますか?対処するのは簡単ではありません...

誰かがより良い解決策を持っていますか?

================【9-22 17:25】======================

さらに、クロスドメインヘッダーを設定すると、内部通話のみのIPを設定できます。外部呼び出しが必要な場合は、古いバージョンのブラウザとの互換性の問題があるかどうかもわかりません。

もちろん、Access-Control-Allow-Origin をバックエンドに追加しますAccess-Control-Allow-Origin
至于你说的前端域名过多的问题，让后端用点小技巧能处理好的，不麻烦
思路：为 Access-Control-Allow-Origin 添加目标域名 (Origin 请求头) 而不是写死的域名或 * あなたが言及したフロントエンドのドメイン名が多すぎる問題については、バックエンドにいくつかのトリックを使用させて処理させてください。面倒なことはしないでください

考え方: Access-Control-Allow-Origin ハードコーディングされたドメイン名または の代わりにターゲット ドメイン名 (<code>Origin request header) を追加します。 *

おおよその実装 (疑似コード):

リーリー
ただし、リクエスト ヘッダーはシミュレートできるため、インターフェイスのリクエスト パラメーターを暗号化し、フロントエンド スクリプトを圧縮して難読化することをお勧めします。

NetEase Cloud Music のインターフェイスの暗号化を参照してください (パッケージを取得して見てください)

すべてのドメイン名を許可するためにバックエンドにクロスドメイン ヘッダーを追加することを検討し、要件を満たさないドメイン名は直接 404 を返します。

nginx リバース プロキシ...あなたは自分で質問し、自分で答えたことが判明しました...🎜

サーバー側でヘッダー「Access-Control-Allow-Origin:*」を設定します。

これは上で述べたものです。アクセスアドレスを指定できます~

フロントエンドコードを失わないサーバー上でドメイン名を転送します

クロスドメインヘッダーは通常の形式で記述することはできませんか?

最初に採用した方法は、jsonp、callback、そのようなリクエストが多すぎると書くのが面倒になります

2番目の方法は、試してみましたが機能しませんでした、Access-Control-Allow-を設定することです。応答 Origin..*?