如何在ajax中启用cors?

Posted

技术标签:

【中文标题】如何在ajax中启用cors?【英文标题】:How enable cors in ajax? 【发布时间】:2015-05-27 15:04:00 【问题描述】:

我正在尝试从以下主机 url test.domain.com/test2.aspx/BindDatatable 调用数据,但是我在控制台窗口中不断收到 404 响应和以下消息:

错误信息:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://test.domain.com/test2.aspx. This can be fixed by moving the resource to the same domain or enabling CORS

我在我的 host(url) 文件的 web.config 文件中添加了以下 cors 标头:

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="origin" />
<add name="Access-Control-Request-Method" value="POST" /> 
<add name="Access-Control-Allow-Headers" value="content-type, accept" /> 
</customHeaders>
</httpProtocol>
</system.webServer>

它还包含 test2.aspx.cs 后面的以下 Web 方法:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
[WebMethod()]
public static string BindDatatable()

    DataTable dt = new DataTable();
    List<UserDetails> details = new List<UserDetails>();

    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["#####"].ConnectionString))
    
        using (SqlCommand cmd = new SqlCommand("######", con))
        
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            foreach (DataRow dtrow in dt.Rows)
            
                UserDetails user = new UserDetails();
                user.Name= dtrow["###"].ToString();
                user.Loan = dtrow["###"].ToString();
                user.Evnt = dtrow["###"].ToString();
                details.Add(user);
            
        
    
     javascriptSerializer serializer = new JavaScriptSerializer();
     return serializer.Serialize(details);

从 corsTest.aspx 调用的 ajax 函数

   $(document).ready(function () 
    $.support.cors = true;
    $.ajax(
        type: "Post",
        crossDomain: true,
        contentType: "application/json; charset=utf-8",
        url: "http://wwww.test.domain.com/test2.aspx/BindDatatable",
        data: "",
        dataType: "json",
        success: function (data) 
            alert(data.toSource());
            console.log(data);
            var myData = JSON.parse(data.d)
             for (var i = 0; i < myData.length; i++) 
                 $("#tbDetails").append("<tr><td>" + myData[i].Name + "</td><td>" + myData[i].Loan + "</td><td>" + myData[i].Evnt + "</td></tr>");                    
            
        ,
        error: function (result) 
            alert("Error");
        
    );
);

我不确定,我还想进一步更新什么以使其正常工作。我是否还需要在 text2.aspx 页面的 head 标记中定义 cors 标题。

提前感谢您提供任何进一步的反馈/指南。

【问题讨论】:

您在方法中返回的结构是什么?可以通过浏览器调用吗? 亲爱的@cr0ss,感谢您的回复。很抱歉,但请注意澄清您在上述声明中的意思,因为我不太清楚您的意思。非常感谢 serializer.Serialize(details); 序列化成什么?你能调试一下看看结果吗?另外,您可以将http://wwww.test.domain.com/test2.aspx/BindDatatable 放在浏览器上并获得预期的结果吗? 亲爱的@cr0ss,为迟到的回复道歉。 serializer.Serialize(details); 序列化为 json 格式字符串。当我执行http://wwww.test.domain.com/test2.aspx/BindDatatable 时,我会收到一个错误警报(cors 未启用),但如果只执行http://wwww.test.domain.com/test2.aspx,我会得到所需的数据。感谢您提供任何进一步的帮助。 你知道你有 4 的 wwww,对吧? 【参考方案1】:

我今天遇到了类似的情况,所以分享我的解决方案,希望它可以帮助别人。我使用 jsonp 从跨域获取数据。举个例子,如果可以访问test2.aspx.cs中的BindDatatable()方法,那么我们可以修改json对象以jsonData(..your json..)这样的格式返回。通过使用 jsonData() 包装该方法,它可以在 ajax 调用期间被 jsonp 读取,如下所示:

var url = "http://wwww.test.domain.com/test2.aspx/BindDatatable";
    $.ajax(
                url: url,
                dataType: 'jsonp',
                jsonpCallback: 'jsonData',
                success: function (response) 
                    console.log('callback success: ', response);
                ,
                error: function (xhr, status, error) 
                    console.log(status + '; ' + error);
                
            );

否则按照上面帖子的建议,您可以在自己的应用程序corsTest.aspx.cs中创建一个函数,并在C#中通过它访问跨域链接并返回json,如下所示:

$.ajax(
    type: "Post",
    contentType: "application/json; charset=utf-8",
    url: "/corsTest.aspx/BindDatatableTest",
    dataType: "json",
    .
    .
    error: function (result) 
        alert("Error");
    
);

在 corsTest.aspx.cs 中定义函数,如:

private string BindDatatableTest()

    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
    string url = "http://wwww.test.domain.com/test2.aspx/BindDatatable";
    WebClient wc = new WebClient();        
    ServicePointManager.Expect100Continue = false;
    ServicePointManager.MaxServicePointIdleTime = 2000;
    string json = wc.DownloadString(url);
    object jsonData = new
    
          jsonFinal = jsonD
    ;

    return Content(serializer.Serialize(jsonData), "application/json");

此外,为了调用跨域 url,您必须将以下代码添加到 web.config:

<system.net>
    <settings>
      <httpWebRequest useUnsafeHeaderParsing="true" />
    </settings>
  </system.net>

【讨论】:

【参考方案2】:

检查远程方法是否可用。检查托管服务的服务器的防火墙是否允许特定端口的连接。如果输出端口没有被阻塞,还要检查你的机器。

启用 cors 的另一种方法是在服务器端建立连接。 例如,您可以将服务引用添加到远程方法,并在本地项目的服务器端使用该方法。然后在客户端上,您只需调用解决方案中的本地方法,而不必在客户端上启用 cors。

【讨论】:

以上是关于如何在ajax中启用cors?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Web 服务和 jQuery Ajax 启用 CORS

如何在 AppHarbor 上接受 CORS AJAX 请求?

在 .ajax POST 中启用 CORS

如何启用 CORS (JS + MVC Web API)

如何将 ActiveMQ AJAX servlet 与 CORS 一起使用?

在 Apache 中启用了 CORS,但 AJAX 不起作用(chrome 表示不允许来源)