Vue プロジェクト設定のリバース プロキシと Cookie 設定の問題

プロジェクトのシナリオ:

最近、Vue を使って新しいプロジェクトを開発しました.サーバーがまだ到着していないため、バックエンドのローカル インターフェイスが呼び出されます.インターフェイスを要求するときにクロスドメインがないため、リバース プロキシは開かれません. 後で、私は非常に基本的なこと、つまり、cookie私の知識の、それを記録し、印象を深めました。

---

問題の説明:

共同デバッグ プロセス中に、ログイン インターフェイスを呼び出してから他のインターフェイスを調整すると、ログイン ステータスが無効であると報告されることがわかりました.私は長い間小さなプログラム プロジェクトに取り組んでいましたが、突然このようなものに遭遇しました.恥ずかしさの。

---

原因分析:

まず、この問題が発生したときにバックエンドに問い合わせたところ、バックエンドからは Cookie が渡されていないとのことでした。それでは、Cookie の定義と機能を確認しましょう。
HTTP プロトコルの Cookie Web Cookie と、サーバーから Web ブラウザーに送信される小さなデータである Browser Cookie が含まれます。サーバーからブラウザに送信された Cookie は、ブラウザによって保存され、次のリクエストでサーバーに送信されます。通常、ユーザーがログインしたままかどうかなど、2 つの要求が同じブラウザーからのものかどうかを判断するために使用されます。
クライアントから HTTP 要求を受信すると、サーバーは応答と共に Set-Cookie ヘッダーを送信できます。通常、Cookie はブラウザーによって保存され、Cookie と HTTP ヘッダーと共に要求をサーバーに送信します。
これを見て調べてみると、ログインインターフェースの呼び出しに成功すると、バックエンドは Set-Cookie を返しましたが、ブラウザが設定していないことがわかりました。これを見ると、Set-Cookie ブラウザーが有効になっていないことがわかります。Cookie はセキュリティ上の考慮事項に基づいており、ブラウザーでクロスドメイン Cookie を取得することはできません。

---

解決：

Vue プロジェクトのルート ディレクトリ vue.config.js にリバース プロキシを設定します。

module.exports = {
    
    
 devServer: {
    
    
  // 设置代理
  proxy: {
    
    
   "/api": {
    
    
    target: "http://127.0.0.1:8081/", // 域名
    ws: true, // 是否启用websockets
    changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
    				   //这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRequiresRewrite: {
    
    
     "^/api": "/"
    }
   }
  }
 }
}

要求されたとき

// '/api'等于'http://127.0.0.1:8081/api'
// 此时请求地址为'http://127.0.0.1:8081/api/picture?method=upload'
get('/api/picture?method=upload')

解決しました！ハッピー。

個人的なレベルは限られています. ご不明な点がございましたら, 指導のためにメッセージを残してください. それは学習と参考のためだけです.

学びに制限はありません！お互いに励まし合い、がんばりましょう！