Ajax Post Cross Domain 跨域请求 WCF RestFull

最新推荐文章于 2021-08-06 17:31:03 发布

原创最新推荐文章于 2021-08-06 17:31:03 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax Post 跨域 #WCF RestFul #Cross Domain Post

害死人同时被 3 个专栏收录

17 篇文章

订阅专栏

移动开发

7 篇文章

订阅专栏

WCF 开发

3 篇文章

订阅专栏

本文详细介绍了在手机WebAPP开发过程中遇到的跨域请求问题及解决办法，包括确保JS语法正确、服务端支持OPTION请求、配置web.config文件以支持跨域响应、以及特殊处理移动跨域请求的程序逻辑。通过遵循这些建议，开发者可以避免常见的跨域错误，提升应用的兼容性和稳定性。

前段时间做手机WebAPP, 但开发人员习惯在浏览器上先调试基本功能, 但这里就出现了跨域请求问题

当然如果你自己写服务, 自己写WebAPP 都是localhost 就不会跨域, 而且发布到手机上也不会跨域

关键来了!!!!

1. 先要确保你的js写的是对的

 $.ajax({
        url: url3,
        data: JSON.stringify({userName:uid,userPass:pwd}),
                   contentType:"application/json; charset=utf-8",
                   type:"POST",
                   crossDomain: true,
                   dataType: 'json',
        success: function (data) {
        },
        error: function (xhr, textStatus, errMsg) {
            
        }
});

2. 确保你的服务支持OPTION 请求格式, 因为Jquery 跨域请求好像会请求两次, 第一次OPTION, 第二次POST , 所以你的Method上面应该写 *　,而不是POST

3. 你的web.config 的 system.webServer 节点需要增加跨域响应支持

<addname="Access-Control-Allow-Origin"value="*" />

<addname="Access-Control-Allow-Headers"value="Content-Type" />

<addname="Access-Control-Allow-Methods"value="GET, POST,PUT, DELETE, OPTIONS" />

</customHeaders>

</httpProtocol>

4.这个不知道是不是必须的, 需要在system.serviceModel 中的standardEndpoint增加

crossDomainScriptAccessEnabled="true"

本人花了6个小时才解决,希望其他人少走弯路

/// <summary>
/// 移动跨域请求,会请求两次,第一次OPTIONS 空数据请求,为了获取是否允许跨域,第二次才是带数据请求,所以为了避免程序上一些Bug,空请求时就直接返回,不需要经过业务处理.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Global_PreRequestHandlerExecute(object sender, EventArgs e)
{
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
Response.End();
}
}