写了创建web api的小demo后,在另一个项目中的html直接去请求数据,但是得到了错误:Failed to load http://localhost:58764/api/Products: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:62699’ is therefore not allowed access.” 在网上查找解决方案,得知是因为网站的跨域问题:
什么是跨域?
跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用。假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,”跨域”也就以此由来。
首先,跨域问题仅仅发生在Javascript发起AJAX调用或者Silverlight发起服务调用时, JavaScript出于安全方面的考虑不允许跨域调用其他页面的对象。当发起AJAX跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况。
跨域测试
- A作为Web API被访问,实现过程如上一篇文章所示。
- B中用ajax主动访问A,ajax代码如下
//指定请求的地址
let uri = "http://localhost:58764/api/Products";
document.getElementById('btn').onclick = function () {
$.ajax({
url: uri,
type:"GET",
success: function (data) {
$.each(data, function (key, item) {
console.log(item);
});
}
})
}
结果如下
解决
问题简单的来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域,而我们缺少了一个关键的header:access-control-allow-origin
所以现在得目标就变成了如何添加“access-control-allow-origin”,看了好几篇文章,说的方法也不少,最后选了一种比较简单又快捷的方式。
//服务端直接修改配置文件,针对ASP.NET MVC,只需要在web.config中添加如下的内容即可
//system.webServer下添加如下配置:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
修改后结果:
当然还有很多其他的方法可以实现,这里只进行了最简单的一种来测试。
参考更多方法请戳:
https://cnblogs.com/inconceivable/p/5504732.html
http://ruanyifeng.com/blog/2016/04/cors.html
https://blog.csdn.net/crx05/article/details/56287407