jquery跨域问题！答案

【问题标题】：jquery cross domain issue!jquery跨域问题！
【发布时间】：2011-08-25 09:44:18
【问题描述】：

我创建了一个 post 类型的服务。当我从 jquery ajax 发送数据时它不工作。GET 类型的方法工作正常。我也需要帖子类型。解决方案是什么。请帮忙。

var user = document.getElementById("uname").value;
         var pass = document.getElementById("pass").value;
         var utyp = document.getElementById("usertyp").value;
         //  alert("hi"+pass);

         var dat = { "uname": user, "pwd": pass, "utype": utyp };

         Data = JSON.stringify(dat);





     $.ajax({
             url: "http://192.168.1.9:450/Service.svc/Login_Insert",
             type: "POST",
             data:Data,
             contentType: "application/json; charset=utf-8",
             dataType: "jsonp",
             processdata: true,
             success: function res(msg) {
                 alert("hello" + msg);
             },
             error: function error(response) {

                 alert("error");
                 alert(response.responseText);
                 alert(JSON.stringify(response));
             }
         });

问候，吉里布山

【问题讨论】：

为什么不在此处发布代码示例。

标签： jquery wcf cross-domain

【解决方案1】：

在您调用的服务方法中，将这 4 行代码插入下面函数的开头。

    public string GetEmployee(string id, string name, string email)
    {
        WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Methods", "GET"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Headers", "Content-Type, Accept");
        Employee employee = new Employee();
        employee.TRGEmpID = id;
        employee.First_Name = name;
        employee.Email = email;
        EmployeeManagement empMgmt = new EmployeeManagement();
        var json = new JavaScriptSerializer().Serialize(empMgmt.Search(employee).FirstOrDefault());
        return json;
    }

另外，在 svc 文件中，在您的函数之前添加这一行，如下所示。

        [OperationContract]
    [WebInvoke(Method = "GET",
       ResponseFormat = WebMessageFormat.Json,
       RequestFormat = WebMessageFormat.Json,
       BodyStyle = WebMessageBodyStyle.Bare)]
    string GetEmployees(string name);

如果你也需要 web.config，这里是

<?xml version="1.0"?>

<system.web>
    <compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
    <services>
        <service  name="EmployeeService.EmployeeSearchService" behaviorConfiguration="DefaultServiceBehavior">
            <endpoint binding="webHttpBinding" contract="EmployeeService.IEmployeeSearchService"      behaviorConfiguration="DefaultEPBehavior" />
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="DefaultEPBehavior">
                <webHttp />
            </behavior>
        </endpointBehaviors>
        <serviceBehaviors>
            <behavior name="DefaultServiceBehavior">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
    To browse web app root directory during debugging, set the value below to true.
    Set to false before deployment to avoid disclosing web app folder information.
  -->
    <directoryBrowse enabled="true"/>
</system.webServer>

【讨论】：

【解决方案2】：

一些提示：

当您使用 jQuery 时，无需使用典型的 javascript 样式获取价值。
JSON.stringyfy() 不是必需的
不要使用DATA作为变量名，误导（我认为data是js的保留关键字）

使用 JSONP 加载到 JSON 块中。将添加一个额外的“？callback =？”到 URL 的末尾以指定回调。

我在这里修改了你的代码

var user = $("#uname").val();
var pass = $("#pass").val();
var utyp = $("#usertyp").val();
var userData = { "uname": user, "pwd": pass, "utype": utyp };
$.ajax({
             url: "http://192.168.1.9:450/Service.svc/Login_Insert?callback=?",
             type: "POST",
             data:userData,          
             crossDomain:true
             contentType: "application/json; charset=utf-8",
             dataType: "jsonp",
             processdata: true,
             success: function res(msg) {
                 alert("hello" + msg);
             },
             error: function error(response) {
                 alert("error");
                 alert(response.responseText);
                 alert(JSON.stringify(response));
             }
         });

REFERENCE

【讨论】：

【解决方案3】：

使用 JSONP 解决跨域请求。这实际上是一种绕过浏览器安全模型的黑客攻击。它通过包含远程脚本块并在准备好时自动执行回调函数来工作。这只能作为 GET 请求来完成

【讨论】：