問題描述

使用WebApi編寫通用服務，小程序POST調用，服務參數(shù)獲取正常，頁面POST調用，服務參數(shù)無法獲取

代碼示例

WebApi服務

        // POST: api/Test
        public string Post(Dictionary<string, object> dic)
        {
            return dic.ToString();
        }

小程序調用

wx.request({
      url: "http://localhost:24739/api/Test",
      method: 'POST',
      data: {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3'
      },
      success: function (res) {
        debugger
      },
      fail: function (res) {
        debugger
      }
    })

小程序調用正常

小程序調用監(jiān)視

頁面調用

        var url = "http://localhost:24739/api/Test";
        var data = {
            'key1': 'value1',
            'key2': 'value2',
            'key3': 'value3'
        };
        $.ajax({
            url: url,
            method: 'POST',
            dataType: "json",
            //contentType: "application/x-www-form-urlencoded", //默認
            //contentType: "multipart/form-data", 
            //contentType: "application/json", 
            data: data,//JSON.stringify(data),
            success: function (res) {
                debugger
            },
            fail: function (res) {
                debugger
            }
        })

頁面調用無法獲取

頁面調用監(jiān)視

問題分析

對比發(fā)現(xiàn)主要為content-type不同，但指定頁面contentType非默認后，提示跨域相關信息

修改contentType

方法一，同源訪問

將測試頁面拷貝至服務端口下，再次調用，正常解析

同域訪問

正常解析

方法二，使用[FromBody]接收，再轉換合適類型

WebApi服務

    public class dic {
        public string strJson { get; set; }
    }

        // POST: api/Test
        public string Post([FromBody]dic dic)
        {
            //轉json
            JObject json = JObject.Parse(dic.strJson);
            //轉字典
            Dictionary<string, object> k = StringToDictionary(dic.strJson);
            //......
            return "";
        }

頁面調用

var url = "http://localhost:24739/api/Test";
        var data = {
            "strJson": "{ 'key1': 'value1', 'key2': 'value2', 'key3': 'value3' }"
        };
        $.ajax({
            url: url,
            method: 'POST',
            dataType: "json",
            //contentType: "application/x-www-form-urlencoded", //默認
            //contentType: "multipart/form-data", 
            //contentType: "application/json", 
            data: data,
            success: function (res) {
                debugger
            },
            fail: function (res) {
                debugger
            }
        })

正常解析

總結

WebApi使用特殊參數(shù)接收時，可逐步排除問題，適當轉換思路常常有意外的驚喜

ajax跨域常見解決辦法：
1.JSONP僅支持GET
2.CORS設置訪問域總有問題，測試未成功

另：nodejs、小程序之類貌似天生就能很好支持跨域