博主最近在做一个H5静态定位签到功能,提供给APP混合调用,作为其子应用。
由于出现bug的现象繁多(收到其他bug的影响以及部分JS是在APP外壳注入的),导致我迟迟无法定位到问题所在
引入vConsole后,多点console.log,再在vConsole上执行一些变量,看是否因为异步注入导致没有接收到值
再次强调,真机调试移动端H5,强烈建议引入vConsole!!!
并且如果接口地址是https路径的话,调试不能用本机ip作为调试地址,否则会出现https降维获取http资源,是不安全的,会被浏览器拦截请求(资源、接口)
如果直接在index.html文件中使用jquery发送ajax请求也是会收到浏览器跨域拦截的,即便自己写一个node请求转发服务,也只能发送GET这种简单请求,无法发送POST请求,因为发送POST请求也会因为浏览器的第一次options预请求返回的错误数据,导致请求失败。。。
node请求转发代码:
// var express = require('express');
// var request = require('request');
// var app = express();
// app.use('/', function (req, res) {
// var url = 'http://localhost:8091/' + req.url;
// console.log(url, req, res)
// request({
// uri: url,
// method: 'GET',
// json: true
// }, function (_err, _res, _resBody) {
// res.json(_resBody)
// })
// })
// app.listen(8092, () => {
// console.log('服务开始监听,端口为8092!')
// });
var express = require('express');
var proxy = require('http-proxy-middleware');
var bodyParser = require('body-parser')
var app = express();
// app.all('*', function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// res.header("X-Powered-By",' 3.2.1')
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// });
app.use('/', proxy({
// 代理跨域目标接口
target: 'https://xxxx.xxxxxx.com.cn/api/signIn/mgt/signIn',
changeOrigin: true,
// 修改响应头信息,实现跨域并允许带cookie
onProxyRes: function (proxyRes, req, res) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", 'X-Requested-With');
res.header('Access-Control-Allow-Headers', 'Content-Type');
},
// 修改响应信息中的cookie域名
cookieDomainRewrite: false // 可以为false,表示不修改
}));
// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({
// extended: false
// }));
app.listen(3000);
console.log('Proxy server is listen at port 3000...');
window.signIn = function () {
let isProdMode =
window.location.href.indexOf('home.cmschina.com') > -1
let isDev = window.location.href.indexOf('localhost') > -1
let appPrefix = isProdMode
? 'https://home.cmschina.com/'
: 'https://oams.newone.com.cn/api/'
let url = appPrefix + 'signIn/mgt/signIn'
// appPrefix = isDev ? 'http://xxx.xxx.xx.xxx:3000/' : appPrefix
// if (isDev) url = appPrefix
let data = {
sourceId: 'ea77a04581aa4639ad20c80236da75f6',
signInNum: 1,
name: '陈铎',
longitude: 113.946102,
latitude: 22.521771,
}
$.ajax({
// type: 'GET',
type: 'POST',
url: url,
async: true,
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
crossDomain: true,
success: function (data) {
console.log('data==>', data)
},
})
window.signInStatus = true
}