Vue axiosとGo FrameバックエンドフレームのOptionsはドメインをまたぐ問題を要求して詳しく説明します。


ドメインをまたぐ問題は前後の両端から分けて検査できます。
フロントエンド:Vue+axios
axiosリクエストヘッドは'Content-Type':'appication/json'を使って、
そして、ヘッドには、Tokenを転送するためのAuthorzationフィールドが設定されています。
パラメータはQsトランスコードされていません。
以下のコードを使って登録インターフェースをテストします。

//      ,   axios       this.$axios  
this.$axios.post('/signin', {account: '', password: ''})
 .then(res => {
  console.log('  :', res)
 })
 .catch(err => {
  console.log('  : ', err)
 })
次のエラーが発生しました。
Access to XMLtpRequest at'http://127.0.0.1:8080/api/v1/signin'from origgin'http://localhost:8081'has been blocked by CORS policy:Reponse to preflight request doesn't pass access control check:It does t have HTTP status.
同時にPOST要求はOPTTIONS要求になり、404に戻る。

ここに二つの問題があります。一つはなぜPOSTがOPTTIONSになったのですか?URLパスが間違っていません。なぜ404に戻りますか?
POST変OPTTIONS問題は、複雑なクロスドメイン要求を含み、以下のいずれかの条件に合致する要求は、複雑な要求としてもよい。
  • は、HEAD、GET、POST以外の要求方法を使用している。
  • ヘッドフィールドは、Accept、Acct-Language、Conttent-Language、Last-Event-ID、Conteet-Typeを超えず、Contect-Typeの値は、aplication/x-wn-form-urlencodd、multit/form-data、text/playeに限定されます。
  • 設定されたAuthortizationフィールドは、Contect-Typeもaplication/jsonのために設定されているので、この要求は複雑なドメイン横断要求となり、正式な通信の前にOPTTIONSクエリ要求を追加します。「プリチェック」要求といい、サーバーに権限などの情報を要求するために、事前検査要求が成功した後、実際のPOST要求を送ります。
    どうしてOPTTIONS要求は404に戻るのですか?
    上記のエラーの説明と分析によって、答えははっきりしているはずです。つまり、サービスエンドのルートがOPTTIONSタイプの要求に対して応答していないため、404の状況になります。
    バックエンド:GoFrame
    GoFrameのルーティングコードは以下の通りです。
    
    func init() {
     s := g.Server()
     //    CORS    
     s.BindMiddleware("/api/*", middleware.CORS)
     s.Group("/api", func(group *ghttp.RouterGroup) {
      ...
      //   :       POST
      group.POST("/signin", userController, "SignIn")
     }
    }
    
    /signinのルーティングは、要求方式がPOSTであることを指定しています。当然、他のタイプの要求には応じられません。以下のように定義することで、すべてのタイプの要求に応答することができます。
    
    group.ALL("/signin", userController, "SignIn") 
    このようにしてルーティングはすべての要求方法をサポートするが、コントローラのSignIn方法ではどのタイプの要求に応答するべきかを判断する必要があり、煩雑であり、この方法を推奨しない。
    実はCORSの中間部品でOPTTIONS要求に対して統一的に応答すればいいです。
    
    // CORS         
    func CORS(r *ghttp.Request) {
     //         CORS   
     r.Response.CORSDefault()
     if r.Method == "OPTIONS" {
      r.Response.WriteStatusExit(http.StatusOK)
     } else {
      r.Middleware.Next()
     }
    }
    
    また、GoFrameフレームを使用して、CORSミドルウェアを大域的に追加する必要があり、ルートグループに追加すると、同じくOPTIOS要求404が発生し、中間部品のコードは要求過程で実行されず、原因はまだ分かりません。
    本論文で述べたクロスドメイン問題はウェブページでVue+axiosを使う時に現れたもので、Postmanツールを使って調整すればすべて正常です。ここでは検査過程と解決方法を記録して、必要な子供靴があるように手伝ってほしいです。
    ここでは、Vue axiosとGo FrameバックエンドフレームのOptionsについて、ドメインを越えた問題について詳しく説明してください。Vue axiosとGo Frameは国境を越えています。以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。