uni-app uni.request 请求的注意事项

uni-app uni.request 请求 header Content-Type 发布于 2021-03-24

uni-app的由来讲述DCloud是这个行业的先驱者，现在的小程序是站在巨人肩膀上的二次产物。微信小程序，百度小程序，字节跳小程序等等，在商业行为手法上，属于贴商标大法。意味着你只要打通其一，即可畅通全平台小程序开发，同宗同源，uni-app 为此可以做到跨平台开发。

此前有微信小程序开发的基础，uni-app上手基本不成问题，现有的微信小程序类库，直接将 wx 改 uni，更改前缀，瞬间无缝对接，小程序「活」过来了。

事情如果真这么简单，那程序员都可以集体离职了。二次开发的产品，不单单换了马甲，甚至会魔改或阉割，在Console看到一大推错误都是小意思了。

最主要uni.request请求数据，报的错误最多，如：

ConsoleAccess to XMLHttpRequest at 'http://www.didaolan/posts/getList' from origin 'http://localhost:8080' has been blocked by CORS policy: Request heer field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

简单点说，header的content-type没有定义传送的参数类型，POST的请求必定要事先声名。

uni.request POST的请求:

uni-appuni.request({
    url: 'http://www.didaolan/posts/getList', 
    method:'POST',
    data: {
        page: 1
        offset: 12
    },
    header: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: (res) => {
        console.log(res.data);
    }
});

当你以为一切完后，至到你需要传递数组参数时，在Network下看到数组参数变成[Object Object]，接口自然无法获数组数据。