フロントエンドビルドパッケージによって生成された dist は、nginx を使用してインターフェイスを実行し、エラー 405 および 401 を報告します。

パッケージ化された dist のビルドの概要。

dist ディレクトリは、パッケージ化されたプロジェクトコードと関連する依存関係を含むディレクトリであり、展開中にプロジェクトを他の環境に移植するために使用されます。これにより、整理され簡素化されたファイル構造が提供され、展開プロセスがより便利で信頼性の高いものになります。

エラーレポートを直接開くと空白になりますが、nginxを使用して起動することができます。Nginx 公式 Web サイト: nginx ニュースのダウンロードが速くて便利です。環境を設定する必要はありません。端末管理者として nginx フォルダーに直接入って nginx スタートアッププロジェクトを開始できますが、スタートアップファイル nginx を設定するだけです。 .conf。

状況 1. インターフェイス 405 の問題:

状況に応じて、開始されたプロジェクトでは、インターフェイスに問題はなく、リクエストヘッダーが完全に追加され、パラメーターの送信要件もサーバーの要件に準拠していますが、ビルドパッケージによって生成された dist ファイルが生成されると、 nigx で実行すると、インターフェイスはエラー 405 を報告します。

この問題が発生した場合は、nginx の conf フォルダー内の nginx.conf ファイルでインターフェースを構成する必要があります。

次のコードをサーバー内の対応する場所に追加します。

proxy_set_header Host app.dtuip.com;  
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址（即发起请求的用户的 IP 地址）作为值传递给后端服务器。
proxy_set_header X-Real-IP $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址（即发起请求的用户的 IP 地址）作为值传递给后端服务器。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Forwarded-For 头字段。它将包含了请求经过的所有代理服务器的 IP 地址，并以逗号分隔的形式传递给后端服务器。这个字段可以用于追踪请求的路由路径。
proxy_set_header REMOTE-HOST $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 REMOTE-HOST 头字段。它将客户端的 IP 地址作为值传递给后端服务器。请注意，REMOTE-HOST 这个头字段并不是标准的 HTTP 头字段，而是一种自定义的头字段。
proxy_set_header Upgrade $http_upgrade;(可忽略)
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 Upgrade 头字段。它将客户端发送的 Upgrade 头字段的值原样传递给后端服务器。这个头字段通常用于支持 WebSocket 连接升级。

私のフロントエンド開発におけるインターフェイスプロキシパスはすべて /api で始まるため、ここで完成したコードは次のようになります。

nginx エラーが発生した場合は、logs/error.log ログファイル内の特定のエラーレコードを確認してください。

 server {
        listen       5173; //监听端口，访问端口，填写自己想要的端口号
        //服务器的域名或主机名称。默认都是不需要更改的
        server_name  localhost;
        //  必要，一般只需要更改第一个路径。
        location / {
            root   index_html/dist;  // 请求将会在该目录中查找文件。
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
          }
        //重点接口配置 ！！！  
        location ^~ /api/  {
          proxy_pass https://app.dtuip.com/;  //这个地址是我的绝对地址，按需替换成自己的
          proxy_set_header Host app.dtuip.com;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header Upgrade $http_upgrade;  
          }
        }

設定が完了すると、インターフェイスリクエストで 405 問題を解決できるようになります。

この設定でも機能しない場合は、次の点を考慮してください。 ① Nginx 設定ファイルで、許可されたリクエストメソッドが正しく設定されていることを確認してください。Nginx ではデフォルトで GET メソッドと HEAD メソッドが有効になっており、その他のメソッドは手動構成が必要です。設定ファイルに、allow ディレクティブ、または対応する proxy_pass ディレクティブまたは fastcgi_pass ディレクティブが含まれていることを確認してください。② Nginx を実行しているユーザーに、要求されたメソッドを実行するための十分な権限があるかどうかを確認します。Nginx ユーザーが関連ファイルおよびディレクトリに対する適切なアクセス権を持っていることを確認します。③Nginx に mod_security や WAF (Web Application Firewall) などのセキュリティポリシーが設定されている場合、特定のリクエスト方法が制限される場合があります。この場合、セキュリティポリシーを更新するかルールを調整して、必要なリクエストメソッドを許可する必要があります。④バックエンドアプリケーションから405エラーが返される場合がありますので、サーバーを探してください。

状況 2: インターフェイス 401 の問題。

状況によりますが、ローカルでコードを起動した場合はインターフェースに全く問題はありませんが、ビルドパッケージで生成されたdistファイルをnginxで実行するとインターフェースでエラー401が報告されます。

考慮すべき方向: ① インターフェースパラメータ転送エラー。② dist は静的ファイルであるため、post 経由でリクエストを送信できない可能性があります。③ インターフェース環境に問題があるファイアウォールの設定が間違っていたり、ルールの設定が厳しすぎると、インターフェースが 401 エラーを返す可能性があります。1. アクセス制御: ファイアウォールは、インバウンドおよびアウトバウンドのネットワーク要求を制限する場合があります。2. リクエストのフィルタリング: 一部のファイアウォールは、悪意のあるリクエストや攻撃を防ぐために、リクエストコンテンツのディープパケットインスペクションをサポートしています。3. 認証サービスをブロックする: 一部のファイアウォールは認証サービス (LDAP、Active Directory など) との通信をブロックし、インターフェイスが認証プロセスを完了できず 401 エラーを返す場合があります。4. SSL/TLS 検出: 一部の高度なファイアウォールは、暗号化されたトラフィックを検査および制御するための SSL/TLS 検出機能をサポートしています。

解決：

①自身のパラメータ送信に問題があるかよく確認してください。

② 静的ファイルのため投稿リクエストを送信できない場合は、既存のリンクに転送して問題を解決してください。nginx静的 HTML ページが投稿リクエストを受信し、405 許可されていないエラーを報告します - Xia Lu Dongzang の個人スペース- OSCHINA - 中国のオープンソース技術交流コミュニティ

③ファイアウォールをオフにしてみてください。

上記の方法でも問題が解決しない場合は、nginx にはキャッシュがあるため、変更を加えた後はキャッシュを消去し、再起動する必要があることに注意してください。または、環境を変更して最新のコードを実行し、新たな奇跡的な効果があるかどうかを確認してください。ここで 405 と 401 の問題を解決すると、会社のコンピューターを使用していましたが、問題は解決されていませんでした。週末、自分のコンピューターで実行すると、同じコードと同じ構成で動作するため、問題を解決するときは、コードを検出するために複数の環境を用意することを忘れないでください。！！