素材巴巴 > 程序开发 >

[WebApi]WebApi 跨域问题解决方案:CORS

程序开发 2023-09-10 11:41:54

一、跨域问题的由来

同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容。

正是由于这个原因,我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景:WebApi作为数据服务层,它是一个单独的项目,我们的MVC项目作为Web的显示层,这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目,所以运行起来之后就存在上面说的跨域的问题。

二、跨域问题解决原理

CORS全称Cross-Origin Resource Sharing,中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081,就表示支持http://localhost:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举,可以去网上找找。

三、跨域问题解决细节

下面我就结合一个简单的实例来说明下如何使用CORS解决WebApi的跨域问题
我们新建两个项目,一个WebApi项目(下图中ZettlercnMIS.Api),一个Asp.net Core MVC项目(下图中Web ZettlercnMIS.WebUI)。WebApi项目负责提供接口服务,MVC项目负责页面呈现。如下:
在这里插入图片描述

其中,ZettlercnMIS.WebUI与ZettlercnMIS.Api端口号分别为“36627”和“57189”。Web项目需要从ZettlercnMIS.Api项目里面取数据,很显然,两个项目端口不同,所以并不同源,如果使用常规的调用方法肯定存在一个跨域的问题。

简单介绍下测试代码,Web里面有一个HomeController

     public IActionResult Index(){return View();}
 

对应的Index.cshtml