如何使用 Asp.net 设置 .asmx webservice 启用跨域

Posted 2023-05-08

【中文标题】如何使用 Asp.net 设置 .asmx webservice 启用跨域

【英文标题】：How to set .asmx webservice Enabling Cross-Origin using Asp.net

【发布时间】：2017-03-31 12:26:50

【问题描述】：

我的网络服务代码是

 [WebMethod]
     public List<test> GetMachineData_List(string prefix, int person_id)
     
         using (var db = new TestDB())
         
             List<test> list = db.Fetch<test>("select id,name from machine_data_collection mc where mc.id=@0 and name like '%" + prefix + "%'", person_id);
             return list.ToList();
         
     

我的 jquery Ajax 调用是

 $("#textbx").autocomplete(
            
                source: function (request, response) 
                 $.ajax(
                        url: 'http://localhost:4787/ws/webservice.asmx/GetMachineData_List',
                        data:  prefix: request.term.toString() ,person_id:1,
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) 
                            var jsonArray;
                            try 
                                jsonArray = $.parseJSON(data.d); // using jQuery
                             catch (e) 
                                jsonArray = data.d; // using jQuery

                            
                            response($.map(jsonArray, function (item) 
                                return 
                                    id: item.id,
                                    value: item.Name

                                ;
                            ));

                        ,
                        error: function (XMLHttpRequest, textStatus, errorThrown) 
                            var msg = XMLHttpRequest.responseJSON.d;
                            if (msg == undefined) 
                                alert( "Something went wrong !!" + errorThrown);
                             else 
                                alert( "Error"+ msg);
                            
                        

                    );
                ,
                minLength: 2,
                select: function (event, ui) 
                    var idControl = this.dataset.bindcontrol;
                    try 
                        alert(ui.item.id);

                    
                    catch (ex) 
                        alert( "Oops .. Something happend unexpected !! .. Please redo ");
                    
                
            

    );

我在 web.config 代码中启用了跨域

 <system.webServer>
    <httpProtocol>
      <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://localhost:21702/" />
          <add name="Access-Control-Allow-Headers" value="X-AspNet-Version,X-Powered-By,Date,Server,Accept,Accept-Encoding,Accept-Language,Cache-Control,Connection,Content-Length,Content-Type,Host,Origin,Pragma,Referer,User-Agent" />
          <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />
          <add name="Access-Control-Max-Age" value="1000" />
          <add name="Access-Control-Allow-Credentials" value="true" />
        </customHeaders>
    </httpProtocol>
  </system.webServer>

在文本框中更改文本时发生错误。 来自 Ajax 调用的错误 Meaasge 是：

XMLHttpRequest 无法加载 http://localhost:4787/ws/webservice.asmx/GetMachineData_List。回复 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:21702” 使用权。响应的 HTTP 状态代码为 500。

【问题讨论】：

查看这篇文章-> codequirksnrants.wordpress.com/2014/04/18/…

我遇到了同样的错误。@mybirthname

【参考方案1】：

在Web.config文件中添加以下代码sn-p：

  <system.web>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
   </webServices>
 </system.web>
 .............
..............
 <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Headers" value="accept, content-type" />
        <add name="Access-Control-Allow-Origin" value="http://localhost:4200"/>
        <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" /> 
        **...(add additional add names and values when you need).......**
      </customHeaders>
    </httpProtocol>
  </system.webServer>

在我的情况下 <add name="Access-Control-Allow-Origin" value="http://localhost:4200"/> 网络服务消费者应用程序 (Angular) 的基本 URL 是 http://localhost:4200。

您必须在该特定位置提及您的基本网址。

【参考方案2】：

尝试在您的 json 调用中使用 jsonp。

$("#textbx").autocomplete(
        
            source: function (request, response) 
             $.ajax(
                    url: 'http://localhost:4787/ws/webservice.asmx/GetMachineData_List',
                    data:  prefix: request.term.toString() ,person_id:1,
                    dataType: "jsonp",