jquery跨域调用wcf

使用jquery跨域调用wcf服务的时候会报如下错误

         $.ajax({
url: 'http://localhost:28207/Service1.svc/GetData',
method: 'get',
dataType: 'json',
data: { value: val },
success: function (data) {
$("label").text("success: " + data);
},
error: function (err) {
$("label").text("error: " + err);
}
});

jquery跨域调用wcf

之前一直以为跨域的请求只要调用方做修改就可以的,实际解决问题的时候发现服务端wcf的binding配置也需要支持

一、wcf服务端配置

  1. 需要将配置中webHttpBinding属性crossDomainScriptAccessEnabled置为true

jquery跨域调用wcf

  2. 接口得支持GET方式调用 ,因为jquery跨域请求时候的方式就是get

  [ServiceContract]
public interface IService1
{
// 跨域调用的话得支持GET方式
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Bare,
UriTemplate = "/GetData?value={value}")]
string GetData(int value);
}

二、客户端调用

以jsonp的方式调用,表明是跨域请求

    var val = $("#txtValue").val();
// jquery跨域调用jsonp方式
// jquery会自动填充callback=?中的问号
// 实际调用时请求的url是 http://localhost:28207/Service1.svc/GetData?callback=jQuery1102023912459355778992_1460275935452&value=321&_=1460275935453 $.ajax({
url: 'http://localhost:28207/Service1.svc/GetData',
method: 'get', //这个可以去掉, 因为jsonp默认就是get方式
dataType: 'jsonp',
data: { value: val },
success: function (data) {
$("label").text("success: " + data);
},
error: function (err) {
$("label").text("error: " + err);
}
});

三、结果

jquery跨域调用wcf

可以看到jquery的jsonp跨域调用自动给我们添加一个 callback参数,提供给服务端回调的。

示例代码

跨域也可以通过W3C的一个标准CORS(Cross-Origin Resource Sharing) 跨域资源共享来实现的;

这个标准需要浏览器和服务器同时支持, 就像我上面的例子服务端开启配置(不同的服务框架有不同的设置,也可以直接iis上设置Access-Control-x 等响应头)并且chrome浏览器支持;

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

上一篇:实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法


下一篇:配置nginx虚拟目录配置文件支持tp的pathinfo