之前的文章,我们了解了 WebAPI 的 Basic 基础认证,在这一章,我们就来了解一下,如何解决 WebAPI 的跨域问题。
在解决问题之前,我们需要先了解问题,什么是跨域
跨域从本质上来讲,其实并不是我们写的程序的问题,而是浏览器的行为,举个例子,我们写了一个 WebAPI 项目之后,别的程序想要调用我们的方法的时候,因为域名不同,此时就会出现跨域问题。下面上图,我把之前的项目复制到一个测试的解决方案中,然后把他的端口号进行修改,
程序我一点都没有改,还是 Basic 的那个程序,所以在登陆功能中调用的端口号还是没有变的,接下来我们就在10086端口号的程序中打一下断点并启动调试,然后打开10010的项目网站来试一下,看看能不能访问成功。
我们可以看到。在10010的程序中调用10086的方法是可以成功的,请求已经进来了
但是我们发现,无论怎么点击登陆都没办法成功登陆,打开调试工具,我们发现,请求是已经成功了的,但是下面有一个报错:
XMLHttpRequest cannot load http://localhost:10086/api/MyWebAPITest/Login?Name=957&Password=lsy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:10010' is therefore not allowed access.
这句话的大致意思是:这个 Http 请求缺少 Access-Control-Allow-Origin 头信息,所以不能在域名为10010的程序中访问。
这足以说明,跨域问题的出现并不是我们程序中的问题,而是浏览器的行为。
那么这种问题我们应该怎么解决呢,其实很简单,只需要在被调用的项目的 WebAPI路由中进行一下设置就可以了。
首先我们在10086的程序中打开 NuGet 包管理,并添加 Microsoft.AspNet.WebApi.Cors 包
然后添加命名空间 System.Web.Http.Cors 并添加以下代码到 WebAPiI 的路由配置文件中
在这个跨域信息的配置方法中是可以通过参数设置端口号和地址的,我们就用 * 来表示不进行限制。最后我们来看一下配置之后的结果。
以上就是 WebAPI 的跨域配置方法。另外还要说一句,解决跨域的问题更多时候是为了缓解服务器的压力,在页面上现实的内容并不来自于一台服务器。