使用jquery跨域調(diào)用wcf服務(wù)的時候會報如下錯誤

1 $.ajax({ 2 url: 'http://localhost:28207/Service1.svc/GetData', 3 method: 'get', 4 dataType: 'json', 5 data: { value: val }, 6 success: function (data) { 7 $("label").text("success: " + data); 8 }, 9 error: function (err) { 10 $("label").text("error: " + err); 11 } 12 });

之前一直以為跨域的請求只要調(diào)用方做修改就可以的，實際解決問題的時候發(fā)現(xiàn)服務(wù)端wcf的binding配置也需要支持

一、wcf服務(wù)端配置

?需要將配置中webHttpBinding屬性crossDomainScriptAccessEnabled置為true

?　　2. 接口得支持GET方式調(diào)用 ，因為jquery跨域請求時候的方式就是get

1 [ServiceContract] 2 public interface IService1 3 { 4 // 跨域調(diào)用的話得支持GET方式 5 [WebInvoke(Method = "GET", 6 RequestFormat = WebMessageFormat.Json, 7 ResponseFormat = WebMessageFormat.Json, 8 BodyStyle = WebMessageBodyStyle.Bare, 9 UriTemplate = "/GetData?value={value}")] 10 string GetData(int value); 11 }

二、客戶端調(diào)用

以jsonp的方式調(diào)用，表明是跨域請求

1 var val = $("#txtValue").val(); 2 // jquery跨域調(diào)用jsonp方式 3 // jquery會自動填充callback=?中的問號 4 // 實際調(diào)用時請求的url是 http://localhost:28207/Service1.svc/GetData?callback=jQuery1102023912459355778992_1460275935452&value=321&_=1460275935453 5 6 $.ajax({ 7 url: 'http://localhost:28207/Service1.svc/GetData', 8 method: 'get', //這個可以去掉， 因為jsonp默認(rèn)就是get方式 9 dataType: 'jsonp', 10 data: { value: val }, 11 success: function (data) { 12 $("label").text("success: " + data); 13 }, 14 error: function (err) { 15 $("label").text("error: " + err); 16 } 17 });

三、結(jié)果

?

可以看到j(luò)query的jsonp跨域調(diào)用自動給我們添加一個 callback參數(shù)，提供給服務(wù)端回調(diào)的。

?

示例代碼

?

跨域也可以通過W3C的一個標(biāo)準(zhǔn)CORS（Cross-Origin Resource Sharing） 跨域資源共享來實現(xiàn)的；

這個標(biāo)準(zhǔn)需要瀏覽器和服務(wù)器同時支持， 就像我上面的例子服務(wù)端開啟配置（不同的服務(wù)框架有不同的設(shè)置，也可以直接iis上設(shè)置Access-Control-x 等響應(yīng)頭）并且chrome瀏覽器支持；

參考:　　?http://www.ruanyifeng.com/blog/2016/04/cors.html??

轉(zhuǎn)載于:https://www.cnblogs.com/mushishi/p/5374484.html

總結(jié)

以上是生活随笔為你收集整理的jquery跨域调用wcf的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。