跨域 jquery/Ajax 服务调用遇到问题答案

【问题标题】：Having Trouble with a cross Domain jquery/Ajax service call跨域 jquery/Ajax 服务调用遇到问题
【发布时间】：2016-11-17 18:15:17
【问题描述】：

我已经在这里和其他地方逐个阅读线程，试图让跨域 ajax 调用正常工作。我有一个返回简单布尔值的 Restful WCF 服务。我使用正确的响应格式（Json）和带有回调参数的预期 url 设置它：

[WebGet(RequestFormat = WebMessageFormat.Json, 
ResponseFormat = WebMessageFormat.Json, 
UriTemplate = "ShowCreditCardTextJQUERY?memberNumber={memberNumber}&callback={callback}", 
BodyStyle = WebMessageBodyStyle.WrappedRequest)]

我的 Ajax 看起来像这样：

$.ajax({
    url: "http://example.com/service/service.svc/ShowTextJQUERY",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",               
    crossDomain:true,
    data: "{'memberNumber':'" + memberNumber + "'}",
    cache: false,               
    //success: alert(memberNumber),
    success: function (data) {
        var output = data;

        if (!data) {
            $("#dialog").dialog(
           {
               modal: true,
               width: 735,
               height: 550
           });
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
    }
});

我收到 200 作为响应，但它出现在错误块中。我不知所措（而且对 jquery/ajax 还是很陌生）。任何帮助将不胜感激。

【问题讨论】：

鉴于 200 响应但没有数据，听起来您正在被 Same Origin Policy 阻止。如果您检查控制台，您可以确认这一点；接收域没有Access-Control-Allow-Origin 标头会出错。您是否在 WCF 服务上启用了 CORS？
我没有，如何设置？
使用 IE 中的开发人员工具，如果我将数据类型更改为 json 而不是 jsonp，我确实会看到我期望在响应正文中返回的响应（在本例中为 false 的布尔值）在我的本地主机上（显然）
JSON 和 JSONP 不可互换 - 您需要以 JSONP 格式返回数据才能使其工作。另外，如果您收到我在第一条评论中提到的错误消息，请在谷歌上搜索“WCF 启用 CORS”，您应该会得到解决方案
谢谢，没有看到返回的错误，我看到了我期望的值。所以也许这只是解析响应的问题。

标签： javascript jquery json ajax wcf

【解决方案1】：

可能这些代码行可以解决您的问题，这是用于常规 Web 服务调用的

          var jsonData = [YOUR JSON PARAMETER];

            $.ajax({
                async: false,
                type: "POST",
                url: [YOUR WEB SERVICE URL],
                contentType: "application/json; charset=utf-8",                  
                data: JSON.stringify({ json: jsonData }),
                dataType: "json",                
                success: OnSuccess,
                failure: function(err) {
                    alert("Error : " + err.d);
                }  
            }); 

            function OnSuccess(data) {
                alert("Success:" + data.d);                       
            }

您可以做一件事，只需要在您的 Web 服务 web.config 文件中的 CustomeHeaders 中设置 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers。

 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" />

如果您只想允许特定域，您可以使用域的特定值而不是 * 值来实现

【讨论】：