Beego フレームワークで CORS を使用してクロスドメインの問題を解決する

Web アプリケーションの開発とインターネットのグローバル化に伴い、クロスドメイン要求を行う必要があるアプリケーションがますます増えています。クロスドメインリクエストはフロントエンド開発者にとって一般的な問題であり、アプリケーションが適切に動作しなくなる可能性があります。この場合、クロスオリジンリクエストの問題を解決する最良の方法の 1 つは、CORS を使用することです。

この記事では、CORS を使用して Beego フレームワークでクロスドメインの問題を解決する方法に焦点を当てます。

クロスドメインリクエストとは何ですか?

Web アプリケーションでは、クロスドメイン リクエストとは、あるドメイン名の Web ページから別のドメイン名のサーバーにリクエストを送信することを指します。通常、要求データと応答データは同じドメイン内にあります。つまり、同じプロトコル、ポート、およびプロトコル タイプが使用されます。ただし、ブラウザは通常、セキュリティ上の理由からクロスドメインリクエストを禁止しています。

フロントエンドとバックエンドが別々のプロジェクトでは、クロスドメインリクエストの問題が非常に一般的です。たとえば、フロントエンドで Vue を使用してアプリケーションを作成する場合、データを取得するために特定のバックエンド サーバーに Ajax リクエストを送信する必要がある場合があります。フロントエンド サーバーとバックエンド サーバーが同じドメイン名の下にない場合、リクエストがコード レベルで正しく記述されている場合でも、ブラウザーはリクエストを拒否し、エラーを表示します。これはクロスドメインリクエストの問題です。

CORS とは何ですか?

CORS は Cross-Origin Resource Sharing の略称です。これは、Web アプリケーションがクロスドメイン リソースにアクセスできるようにする HTTP プロトコルに基づくメカニズムです。 CORS メカニズムの登場は主に、前述のクロスドメイン要求の問題を解決することを目的としています。

CORS メカニズムはブラウザーによって実装され、追加の HTTP ヘッダーを使用して、どのソースがクロスオリジン リソースへのアクセスを許可されているかをブラウザーに伝えます。リクエスト時に、ブラウザはレスポンス ヘッダー情報を確認します。レスポンス ヘッダー情報に Access-Control-Allow-Origin フィールドが存在し、このフィールドの値がリクエストされたドメイン名およびポート番号と一致する場合、ブラウザーはクロス アクセスを許可します。ドメインリクエスト。

Beego での CORS の使用

Beego では、beego-cors ライブラリを使用して CORS メカニズムを実装できます。 beego-cors ライブラリのインストール方法は次のとおりです。

go get github.com/astaxie/beego/plugins/cors

インストール後、beego-cors ライブラリをアプリケーションにインポートする必要があります。

import "github.com/astaxie/beego/plugins/cors"

ルーターでの CORS の設定

次に、Beego で CORS を使用する方法を紹介します。アプリケーションが新しいプロジェクトの場合は、アプリケーションの初期化時に次のように設定できます。

package main

import (
    "github.com/astaxie/beego"
    "github.com/astaxie/beego/plugins/cors"
)

func main() {
    beego.BConfig.Listen.HTTPAddr = "0.0.0.0"
    beego.BConfig.Listen.HTTPPort = 8080

    beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
        AllowOrigins: []string{"*"},
        AllowMethods: []string{"PUT", "PATCH", "GET", "POST", "DELETE", "OPTIONS"},
        AllowHeaders: []string{"Origin", "Content-Type", "Authorization"},
        ExposeHeaders: []string{"Content-Length", "Access-Control-Allow-Origin"},
        AllowCredentials: true,
    }))

    beego.Run()
}

上記のコードでは、InsertFilter メソッドを使用して cors という名前のフィルターを追加しました。このフィルターはすべてのリクエストに対して機能するため、* ワイルドカードを使用してルーターを指定します。

Allow メソッドでは、許可されるソース、メソッド、ヘッダーを構成します。ここでは * を使用してすべてのオリジンを許可します。もちろん、特定のドメイン名または IP アドレスを使用して、許可されるソースを制限することもできます。コンテンツタイプ、認可、ソースヘッダーも実際の状況に応じて設定されます。

AllowCredentials フィールドでは、これを true に設定します。これは、クロスドメイン要求で Cookie などの資格情報の送信が許可されることを意味します。

コントローラでの CORS の設定

ルータでの CORS の設定に加えて、コントローラで CORS を設定することもできます。この方法はコントローラーごとに設定でき、柔軟性が高くなります。詳細は次のとおりです。

package controllers

import (
    "github.com/astaxie/beego"
    "github.com/astaxie/beego/plugins/cors"
)

type TestController struct {
    beego.Controller
}

func (c *TestController) Get() {
    origin := c.Ctx.Request.Header.Get("Origin")
    c.Ctx.Output.Header("Access-Control-Allow-Origin", origin)
    c.Ctx.Output.Header("Access-Control-Allow-Credentials", "true")
    c.Ctx.Output.Header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS")
    c.Ctx.Output.Header("Access-Control-Allow-Headers", "Content-Type,Authorization")
    c.Ctx.Output.Header("Content-Type", "application/json; charset=utf-8")

    c.Ctx.Output.Body([]byte("Hello, world!"))
}

上記のコードでは、まずリクエスト ヘッダーの Origin フィールドを取得し、それを Access-Control-Allow-Origin レスポンス ヘッダーとして設定します。これは、リソースへのアクセスを許可するソースをブラウザーに伝えるため、CORS メカニズムの重要なステップです。

Access-Control-Allow-Credentials、Access-Control-Allow-Methods、および Access-Control-Allow-Headers 応答ヘッダーも設定します。それらの機能は、資格情報、許可されたリクエスト メソッド、および許可されたリクエスト ヘッダー フィールドの送信を許可することです。

最後に、Output.Body メソッドを使用して、応答データをクライアントに送信します。

概要

この記事では、クロスドメイン リクエストとは何か、CORS メカニズム、および CORS を使用して Beego フレームワークでクロスドメインの問題を解決する方法を紹介しました。フロントエンドとバックエンドが別々のプロジェクトでは、クロスドメインリクエストが一般的な問題となります。 CORS メカニズムを使用すると、この問題をうまく解決できます。 CORS メカニズムは、beego-cors ライブラリを使用して Beego に簡単に実装できます。この記事がお役に立てば幸いです。

以上がBeego フレームワークで CORS を使用してクロスドメインの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。