How to set .asmx webservice Enabling Cross-Origin using Asp.net
Add below code snippet in Web.config
file:
<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>
In my case <add name="Access-Control-Allow-Origin" value="http://localhost:4200"/>
the base url of webservice consumer app (Angular) is http://localhost:4200
.
You have to mention your base url in that specific place.
Prasanna Kumar J
Updated on August 21, 2022Comments
-
Prasanna Kumar J over 1 year
My webservice code is
[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(); } }
My jquery Ajax call is
$("#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 "); } } } );
And i enable the Cross-Origin in web.config code is
<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>
When change text in textbox error occured. Error Meaasge from Ajax call is :
XMLHttpRequest cannot load http://localhost:4787/ws/webservice.asmx/GetMachineData_List. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:21702' is therefore not allowed access. The response had HTTP status code 500.