微信小程序中开发环境下的POST请求
写在前面
不得不说,开发环境下,微信小程序要是在发起网络请求的话,遇到的坑也是有的。尽管,微信提供了十分便捷的API 供开发者调用。今天在小程序中写了一个表单,需要提交到服务器上,于是发起了一个 POST 请求,结果报错了。
关于网络请求
微信小程序提供了许多使用网络相关的 API,同时文档中也列出了一些(一大堆)注意事项常见问题什么的。比如:
- 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名与进行网络通信
- 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议
- 域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost
- 网络请求的 referer header 不可设置
- wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个
- 小程序进入后台运行后,如果 5s 内网络请求没有结束,会回调错误信息 fail interrupted;在回到前台之前,网络请求接口调用都会无法调用
更多可以查看 相关说明
这些条条框框实在不友好,尤其是开发环境中,向本地服务器发起网络请求时一般都是 localhost。好在文档的末尾,有提到怎样跳过域名校验。
在微信开发者工具中,可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。
所以事情就变得很简单了,关闭域名校验后,直接在程序中调用 API 就行了。
关于 wx.request
相关参数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | string | 开发者服务器接口地址 | |
data | string/object/ArrayBuffer | 请求的参数 | |
header | Object | 设置请求的 header | |
timeout | number | 超时时间,单位为毫秒 | |
method | string | GET | HTTP 请求方法 |
dataType | string | JSON | 返回的数据格式 |
responseType | string | text | 响应的数据类型 |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
更多关于可以参考文档
代码示例
这里的 url 是我自己的 Django 本地服务器地址,已经启动。于是我们可以仿照文档给出的示例,发起一个 POST 请求可以这样写:
wx.request({url: 'http://127.0.0.1:8000/blog/wxapi/',data: {x: 'haha',y: 'ahah'},method:'POST', // 默认 GETheader: {'content-type': 'application/x-www-form-urlencoded' // 默认值 application/json},success:res=> {console.log('---request success---')console.log(res.data)},fail:res=> {console.log(res.data)console.log('---request fail---')},complete: res => {console.log(res.data)console.log('---request complete---')}
})
403 Forbidden
然而,这样请求得到的响应码会是 403,显然这是客户端的错误。仔细看提示会发现,这是由于该 POST 请求没有带cookie或者说 cookie 为 null。而 Django 对 POST 请求都会进行 CSRF cookie 验证,防止CSRF(跨站请求伪造)恶意攻击。这个 CSRF cookie 就是 Django 模板里的 form 表单下的 {% csrf_token %}。这也是微信小程序开发与 web开发的一个区别所在。小程序的运行环境是在微信而不是浏览器,尽管我们可以在 header 中设置一个 Set-Cookie
,也是无济于事,因为我们拿到的并不是 {% csrf_token %} 这样的令牌。所以 Django 服务器会认为这是一个恶意请求,从而返回 403。
解决办法
要想解决说简单也简单,说难也有些复杂。我们已经明确知道这是一个关于跨域请求的问题。仔细观察 Django 项目中的 setting.py
文件,不难发现其中有这样一段配置:
MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]
这是项目中最基本的中间件,其中 django.middleware.csrf.CsrfViewMiddleware
就和 csrf 验证有关。所以我们不妨将其注释,然后在小程序中重新发起请求。观察控制台输出的 res
部分如下:
data:data: "ok"x: "haha new"y: "ahah new"errMsg: "request:ok"header:Content-Length: "48"Content-Type: "application/json"Date: "Sun, 09 Feb 2020 14:44:18 GMT"Server: "WSGIServer/0.2 CPython/3.5.3"X-Frame-Options: "SAMEORIGIN"statusCode: 200
备注:服务器端代码views.py
# 微信小程序测试api
def wxapi(request):if request.method=='GET':context= {"data": "ok"}return JsonResponse(context)if request.method=='POST':x = request.POST['x']y = request.POST['y']print(x + "---" + y)context = {"data": "ok","x":x+" new","y":y+" new"}return JsonResponse(context)return HttpResponse("--ok--")
但是注释该配置是十分危险的下下之策,这里只是开发环境中,为了学习微信小程序,无伤大雅。当然,不这样做的话,我们就需要去实现如何跨域请求拿到 csrf_token 。好在已经有大佬们为我们造好了轮子jango-cors-headers
,我们只需要安装配置它就可以了。这里就不详细讲解了。
欢迎参观
学Django时,顺便写了简单的个人博客。前端用的bootstrap框架。笔记都会同步的。
微信小程序中开发环境下的POST请求相关推荐
- 微信小程序中开发的小坑
微信小程序中开发的小坑 本文随时更新微信小程序开发过程中遇到的小坑.现已收集如下. 微信小程序编译后的大小不能超过1MB. 微信小程序不能建立两个(含)以上的WebStock连接.
- 微信小程序中开发使用腾讯地图定位
在最近的微信小程序中开发使用到腾讯地图定位,开发记录一下相关的情况.首先地图使用的是腾讯地图接口,https://lbs.qq.com/ 上去注册,注册了后去创建APPID和应用名; 注意创建了应用后 ...
- 如何开发微信小程序?开发环境篇
前言 鄙人的文章都会跟随着时代的递进而更新!大家如果想要得到最契合当下时代的文字,可以关注以下鄙人. 本篇文章发布时间:2020年5月18日. 本篇文章最近更新时间:2020年5月18日. ...
- 微信小程序 java服务端下的post请求
微信小程序的 post请求无法获取data参数,一切都是Content-Type问题,之前分析的确实有点错误,Content-Type为'application/json'时,后端需要用@Reques ...
- windows模拟微信小程序_微信小程序的开发环境搭建(Windows版本)
前言: 小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是并行的体系.2017年1 ...
- node.js 微信小程序 部署服务器_微信小程序云开发环境部署,及添加数据
点击蓝字 关注我们 今天在漫无目的逛CSDN的时候,一篇关于微信公众号云开发的文章引起了我的注意.据介绍,小程序云开发简称tcb,是腾讯爸爸给我们提供的基于腾讯云的云服务器.目前云开发已包含云数据库, ...
- 微信小程序---开通开发环境的理解
如何开通开发环境官网文档有详细步骤:链接在这 总结一下我对这个过程的理解: 1.首先我们进入小程序在腾讯云的控制台以自己微信账号注册开发一个小程序,此时会将此账号作为开发者账号,同时也会为这个小程序分 ...
- [物联网] - [STM32/51|JavaWeb|微信小程序] - 2.开发环境配置
注意 单片机方面首先以STM32F407为主,故在与51对接前将不赘述51开发环境配置部分.又因仅单片机开发部分环境配置最为麻烦,故此处仅介绍单片机部分开发环境配置.本系列默认读者拥有最基础的Java ...
- 解决IOS端微信小程序本地开发环境和线上版本的时间显示不一样,线上和体验版本时间相关的计算为NAN。
废话不多说,先看下图,这是线上版本的小程序,ios端无法显示时间相关计算后的数字,要么出现NAN或者null: 然后我将ios手机中的微信小程序,而且是开发版的 "打开调试" 打 ...
最新文章
- Android应用开发—TextView的动态创建
- Linux内核链表实现剖析
- PHP的PHPStorm的使用姿势
- USB-WiFi在x210板子上的移植
- 【学习记录】网络层——IP数据报(格式与分片)
- 什么是AWT_Swing_Vector?居然这么高频使用
- 适用于连续资源块的数组空闲链表的算法
- oracle常用插入一条语句,Oracle:用一条 INSERT 语句批量插入多条记录
- springMVC常见问题
- 目录 1. 数据库优化漏斗法则	1 2. 常见优化手段	2 2.1. 索引	2 2.2. 分页 只返回需要的字段	2 2.3. 批处理	2 2.4. 其他 sp 多线程等	2 3. 索引类型 n
- dubbo源码系列之filter的前生
- c语言自学的代码表示,【图片】c语言初级代码练习自学【编程吧】_百度贴吧...
- 构建高质量的前端工程完全指南
- 排列组合的一些公式及推导
- 塔米狗热门项目:杭州北鸿置业有限公司100%股权转让
- vue.js毕业设计,基于vue.js前后端分离电影院售票小程序系统设计与实现
- 软件测试工作学习必备指南——硬实力
- veracrypt加密mysql_VeraCrypt使用教程,VeraCrypt文件硬盘加密使用教程
- c语言常用的运行速度优化,C语言程序设计优化(提速)
- c语言求椭圆的切线方程,如何快速求椭圆的切线方程
热门文章
- 738.单调递增的数字,714. 买卖股票的最佳时机含手续费,968.监控二叉树
- Android 自定义ViewGroup中onFinishInflate方法可以用来干什么
- 中国移动短信开通/取消 各功能大全
- [数值计算-19]:万能的任意函数的数值求导数方法
- python基础-第一个python程序
- Bootstrap JavaScript插件:Affix插件 (affix.js)
- AI中文语音克隆、语音合成——GitHub上babysor/MockingBird 项目源码部分功能实现
- web: 手机键盘自动获取短信验证码,点击自动填充输入框
- 学习笔记-回溯算法(八皇后问题)暴力法
- http系列 之 http认证 api认证方式 四种方式对比