进阶之路—WebAPI跨域问题

之前的文章,我们了解了 WebAPI 的 Basic 基础认证,在这一章,我们就来了解一下,如何解决 WebAPI 的跨域问题。

在解决问题之前,我们需要先了解问题,什么是跨域

跨域从本质上来讲,其实并不是我们写的程序的问题,而是浏览器的行为,举个例子,我们写了一个 WebAPI 项目之后,别的程序想要调用我们的方法的时候,因为域名不同,此时就会出现跨域问题。下面上图,我把之前的项目复制到一个测试的解决方案中,然后把他的端口号进行修改,

测试解决方案的端口号
被调用的程序的端口号

程序我一点都没有改,还是 Basic 的那个程序,所以在登陆功能中调用的端口号还是没有变的,接下来我们就在10086端口号的程序中打一下断点并启动调试,然后打开10010的项目网站来试一下,看看能不能访问成功。

10086程序中打了断点的代码

我们可以看到。在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 包

Microsoft.AspNet.WebApi.Cors


然后添加命名空间 System.Web.Http.Cors 并添加以下代码到 WebAPiI 的路由配置文件中

配置跨域信息

在这个跨域信息的配置方法中是可以通过参数设置端口号和地址的,我们就用 * 来表示不进行限制。最后我们来看一下配置之后的结果。

配置了跨域信息之后,可以成功的登陆了

以上就是 WebAPI 的跨域配置方法。另外还要说一句,解决跨域的问题更多时候是为了缓解服务器的压力,在页面上现实的内容并不来自于一台服务器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 1.什么是同源策略 1.要了解同源策略,我们必须先知道源即orgin 以百度页面为例,谷歌浏览器打开控制台:输入l...
    GarenWang阅读 1,469评论 2 8
  • 跨域是什么 同源策略 在讲解什么是跨域之前先要清楚什么是同源策略,“同源政策”(same-origin polic...
    JRG_Orange阅读 973评论 0 52
  • 我们住的是商品房,婆婆是个很爱干净的人,这么多年一直没养过宠物 儿子从小就喜欢狗,每次看到外面的流浪狗都忍不住想上...
    芃方阅读 438评论 2 1
  • 秋天未到,思念先行 不会再有并肩直走,谈笑风生的日子 秋天未到,回忆蔓延 不会再有见你脸庞,直言不讳的日子 思念,...
    立早雨中阅读 174评论 0 0