如何在ajax中启用cors？

Posted 2023-03-04

【中文标题】如何在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。