微信小程序开发时遇到403错误解决

前端程序向后台服务器发送请求时，如果服务器不允许跨域请求，则会导致403错误发生（错误信息为：“Invalid CORS request"）。我们通常的解决办法是将信任的域配置到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;
}

对于微信小程序的开发，情况有点不一样，由于微信小程序只允许以域名方式的https连接，因此通过花生壳等内网穿透工具，搭建了一个外部可访问的公网域名，公网域名指向内部地址。

在调试时，就遇到了非法的跨域请求这个问题。其原因是在向后台服务器请求时，微信开发者工具在请求头中，带上了Origin字段，因此服务器判断是一个跨域请求。通过Fiddler等工具可以抓包看到如下信息：

POST https://xxx.xxx.net/public/login HTTP/1.1
Host: sharework.gicp.net
Connection: keep-alive
Content-Length: 50
Pragma: no-cache
Cache-Control: no-cache
Origin: http://127.0.0.1:55135
User-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/e011a64b71b385130aa1f595fe48521c
content-type: application/json
Accept: */*
Referer: https://servicewechat.com/wx955fc9354838fd46/devtools/page-frame.html
Accept-Encoding: gzip, deflate, br

{"account":"user","password":"defaultPassword123"}

 

原因就在这里了。如果直接在手机上预览或调试则不会遇到这个问题。

把http://127.0.0.1:55135加入到允许CORS访问的域中，就可以愉快地开始调试了。

当然，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就是我们要找的端口了。