不改动后台如何实现ajax的跨域post?

bravility
  • 239

1.背景:需要实现微信H5支付无点击自动跳转,所以不能表单提交只能ajax自动提交。
服务器在别人那,因此对于跨域最常用的在服务端设置Access-Control-Allow-Origin的方案不可行
JSONP的get方法不安全,而且别人提供的post接口不一定能get请求过去。
2.单纯在前端做相关设置能否实现ajax跨域post?如何实现?
3.ajax似乎不允许重定向,如果post成功后会重定向,如何实现ajaxpost后重定向?

回复
阅读 7.7k
6 个回答

纯前端不行的,可以自己写个转发服务器,用express+superagent

用nginx反向代理

比如: 把 http://ajax.googleapis.com/ajax/libs/* 转发到 http://cdn.bootcss.com/

server
{
    listen 80;
    server_name ajax.googleapis.com;
    location ~ ^/ajax/libs/(.+)$ {
        return 301 http://cdn.bootcss.com/$1;
    }
    
}

正规做法是CORS,确实需要改后端,JSONP只能get

自己也查阅了比较多的资料,看了纯前端ajax跨域post并没有很好的解决方案。目前自己的做法是写一个隐藏表单,调用这个表单的submit函数,这样可以解决跨域post的问题而不需要用到服务端

1.微信充值部分的调用页需要在公众号绑定安全域名地址的,所以这个肯定得在公众号平台那方。
2.充值是需要拉起WX的WeixinJSBridge.invoke,但需要绑定WX事件WeixinJSBridgeReady,则这部分也必须在1.里的范围内。
3.拉起WX授权充值是绝对不可能在非1.的范围内执行的,即使是iframe也不可能。

因此推荐和对方协商,让对方提供回调接口,如当充值成功,执行你这边的onPayOk()、onPayCancel()这类自定义的方法。
推荐用postMessage来传递数据。

补充:
你要触发充值,你的代码文件必须在1.的地址内,不然让对方提供
pay({

    itemId: '',        // 必填, 值为物品ID
    cpParam: '',    // 选填, 其为cp自定义参数, 会在结果通知接口中传回CP服务器
    auto: true        // 选填, 默认true. true为直接弹出WX授权支付; false为进入一个支付详情页, 再付款
});

这种接口和调用js,只做提交的动作。

宣传栏