微信小程序开发时遇到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就是我们要找的端口了。

微信小程序开发时遇到403错误解决相关推荐

微信小程序访问豆瓣电影api400错误解决方法
微信小程序访问豆瓣电影api400错误解决方法参考文章: (1)微信小程序访问豆瓣电影api400错误解决方法 (2)https://www.cnblogs.com/bubbleStar/p/610 ...
反编译获取微信小程序源码（包含错误解决办法）
PS:本文章仅用于分享自己反编译的过程以及解决办法,切勿小程序反编译成功后做一些违反人伦的事情! 一. 前言最近在搞学校的一个晚签到小程序的时候遇到了一个MD5加密问题,试了好多方法都没有解决,所以 ...
微信小程序出现400或者403错误。
在小程序引用外部的网页api时,突然出现报错400,或者403错误时的解决办法. 1.检查api是否还有效,检查方法为复制api,然后在浏览器打开iain,如果出现返回结果则表明不是api的问题,看2 ...
微信小程序调定定位常见错误解决
一:接口权限开通: 以下 8 个接口需完成准入开通流程:wx.getFuzzylocation.wx.getLocation.wx.onLocationChange.wx.chooseAddress. ...
微信小程序开发时，下载node.js安装后出错误怎么办
我看了一个教学视频,是用的vantweapp,里面有很多组件可以直接用,但是要安装node.js,然后我就是按照网上的教学视频安装步骤,一步步的点击但是会出现一串错误,如果有新手小白出现我一样问题的可 ...
【微信小程序开发】— 图片显示错误：VM24966:2
VM24966:2 Failed to load image http://1042065718.debug.open.weixin.qq.com/pages/detail/detail/detail ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...
强烈推介的几个微信小程序开发小技巧，简单又实用
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家.如果对大家确实有帮助,别忘了点赞哦 ???? - 微信开发者工具版本:1 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

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

微信小程序开发时遇到403错误解决相关推荐

最新文章

热门文章