Web API 跨域问题

写了创建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

猜你喜欢