Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题

Posted yuchen_love

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题相关的知识,希望对你有一定的参考价值。

 
 
webservice 代码
 1     /// <summary>
 2     /// MESService 的摘要说明
 3     /// </summary>
 4     [WebService(Namespace = "http://tempuri.org/")]
 5     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 6     //[System.ComponentModel.ToolboxItem(false)]
 7     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
 8     [System.Web.Script.Services.ScriptService]
 9     public class MESService : System.Web.Services.WebService
10     {
11 
12         [WebMethod(Description = "")]
13         public string GetDataReturnStr(string strXML)
14         {
15             //你的结果处理
16             #region 处理数据
17 
18             #endregion
19             return Common.JsonHelper.SerializeToJson(new Student() { id = "1", name = "测试" });
20         }
21 
22        
23     }
24     [Serializable]
25     public class Student
26     {
27         public string id { get; set; }
28         public string name { get; set; }
29     }

webservice 文件中需要添加的信息
 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
 [System.Web.Script.Services.ScriptService]

WebConfig 文件中需要添加节点
1、解决跨域访问的问题
<system.webServer>
    <!--解决跨域请求 -->
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type" />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
</system.webServer>
2、解决本地调用成功,外网调用失败的问题。
<system.web>
    <webServices>
      <protocols>
        <add name="HttpSoap"/>
        <add name="HttpPost"/>
        <add name="HttpGet"/>
        <add name="Documentation"/>
      </protocols>
    </webServices>
</system.web>

 

 Ajax 代码

 1 $.ajax({
 2                 async: true,
 3                 type: "post",
 4                 url: "http://localhost:41453/IDataServer/MESService.asmx/GetDataReturnStr",
 5                 data: "{strXML:‘123123123‘}",
 6                 dataType: "json",
 7                 contentType: "application/json; charset=utf-8",
 8                 success: function (json) {
 9                     var dataObj = eval("(" + json.d + ")");
10                     alert(dataObj.id + ‘\r\n‘ + dataObj.name);
11                 },
12                 error: function () {
13 
14                 },
15                 complete: function () {
16                 }
17             });

这样就可以实现 ajax 访问webservice接口了










以上是关于Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题的主要内容,如果未能解决你的问题,请参考以下文章

ajax跨域请求调用webservice接口

WebService跨域配置Ajax跨域请求附开发过程源码

通过服务器端设置解决前端AJAX请求跨域访问WebServie(C#开发,IIS发布)

解决apiWebService跨域问题

AngularJS:允许跨域 AJAX 请求

web service006——第三种方式调用,通过Ajax方式访问(跨域)http请求xml数据