如何在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 请求?