ホームページ > 記事 > WeChat アプレット > 小さなプログラムを開発する際の 403 エラーを解決する方法

小さなプログラムを開発する際の 403 エラーを解決する方法

王林転載: 2020-12-21 09:23:474406ブラウズ

問題分析:

フロントエンドプログラムがバックエンドサーバーにリクエストを送信するときに、サーバーがクロスドメインリクエストを許可していない場合は、場合、403 エラーが発生します (エラーメッセージは「無効な CORS リクエスト」です)。では、この問題をどうやって解決すればいいのでしょうか？

(学習ビデオ共有: プログラミングビデオ)

解決策:

次のように、信頼できるドメインを CORS 許可ソースアドレスリストに構成します。

@Bean
public CorsFilter corsFilter() {
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   CorsConfiguration config = new CorsConfiguration();
   config.setAllowCredentials(true);
   config.addAllowedOrigin("http://localhost:3000");
   config.addAllowedOrigin("http://127.0.0.1:3000");
   config.addAllowedOrigin("http://127.0.0.1:55135");
   config.addAllowedHeader(CorsConfiguration.ALL);
   config.addAllowedMethod(CorsConfiguration.ALL);
   source.registerCorsConfiguration("/**", config);
   CorsFilter bean = new CorsFilter(source);
   return bean;
}

WeChat アプレットの開発の場合、状況は少し異なります。WeChat アプレットではドメイン名での https 接続のみが許可されるため、ピーナッツシェルなどのイントラネット侵入ツールを使用して、外部からアクセス可能なパブリックドメイン名。内部アドレスを指します。

デバッグ中に、不正なクロスドメインリクエストの問題が発生しました。その理由は、バックエンドサーバーをリクエストするときに、WeChat 開発者ツールがリクエストヘッダーに Origin フィールドを含めるため、サーバーはそれがクロスドメインリクエストであると判断するためです。 Fiddler などのツールを使用すると、パケットをキャプチャして次の情報を確認できます。

POST https://xxx.xxx.net/public/login HTTP/1.1Host: sharework.gicp.netConnection: keep-aliveContent-Length: 50Pragma: no-cacheCache-Control: no-cacheOrigin: http://127.0.0.1:55135User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.02.1902010 MicroMessenger/6.7.3 Language/zh_CN webview/ token/e011a64b71b385130aa1f595fe48521ccontent-type: application/jsonAccept: */*Referer: https://servicewechat.com/wx955fc9354838fd46/devtools/page-frame.htmlAccept-Encoding: gzip, deflate, br
{"account":"user","password":"defaultPassword123"}

理由はここにあります。携帯電話で直接プレビューまたはデバッグする場合、この問題は発生しません。

CORS アクセスを許可するドメインに http://127.0.0.1:55135 を追加すると、楽しくデバッグを開始できます。

もちろん、ポート 55135 は頻繁に変更されるため、それを修正する方法はまだ見つかりません。現在、次の方法でこのポートをすぐに見つけることができます (Windows を例にします):

1. tasklist | findstr "wechat"、メモリ使用量が最も大きいプロセス番号 (12824## など) を見つけます。 #

E:\apps\data-integration>tasklist | findstr "wechat"
wechatdevtools.exe           13180 Console                    2     98,572 K
wechatdevtools.exe           11092 Console                    2      7,676 K
wechatdevtools.exe           15276 Console                    2    132,520 K
wechatdevtools.exe           18380 Console                    2    136,748 K
wechatdevtools.exe            8652 Console                    2     26,100 K
wechatdevtools.exe           12824 Console                    2    183,668 K
wechatdevtools.exe           16124 Console                    2     89,524 K
wechatdevtools.exe            1164 Console                    2    103,336 K
wechatdevtools.exe           12616 Console                    2     77,056 K
wechatdevtools.exe           13136 Console                    2     83,312 K

2 、 netstat -ano | findstr "12824" で、ステータス LISTENING の行を検索し、唯一のポート

E:\apps\data-integration>netstat -ano | findstr "12824"
  TCP    127.0.0.1:28475        0.0.0.0:0              LISTENING       12824
  TCP    127.0.0.1:28475        127.0.0.1:61306        ESTABLISHED     12824
  TCP    127.0.0.1:28475        127.0.0.1:61318        ESTABLISHED     12824
  TCP    127.0.0.1:28475        127.0.0.1:61402        ESTABLISHED     12824
  TCP    127.0.0.1:28475        127.0.0.1:61403        ESTABLISHED     12824
  TCP    127.0.0.1:55135        0.0.0.0:0              LISTENING       12824

3、55135 が探しているポートです。

小さなプログラムを開発する際の 403 エラーを解決する方法

関連記事