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

Posted 2020-10-12 秦之声

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

 

问题：前端通过ajax调用时候发生错误跨域访问的错误

<!--功能说明：Ajax调用WebService
<script type="text/javascript">
function test(){

$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "http://www.xxxx.org/test.asmx/TestMethod",
data:"{a:12345,b:‘abcd‘}",

success: function (response) {
alert("成功：" + response.d);
},
error: function (msg) {
alert("错误：" + msg);
}
})

}
</script>

解决方法：在WebService服务配置文件web.config文件中添加跨域访问许可，共有2个地方需要修改

1、在configuration节点中的system.web节点里面添加

<!--客服端跨域调用要使用-->
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>

表示可以支持Http的get和post访问，可以更具需求进行修改

2、在在configuration节点中直接添加

<!--客服端跨域调用要使用-->
<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>
其中Access-Control-Allow-Origin的值可以依据具体情况进行设定，为“*”表示所有网站都可以访问