欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Asp.Net中WebApi解决跨域方法

程序员文章站 2024-03-13 11:01:51
...

跨域全称:Cross-origin Resource Sharing(跨域资源共享)

跨域简称:CORS

原理:

       解决跨域问题的原理是通过向http的请求报文响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。

跨域概念:

按照我的理解跨域就是:相互独立的运行程序,一个运行程序请求另一个运行程序的资源或者数据的经过就是跨域。当然这样说的不太准确。

举个例子可能大家会更明白点:

比如:前端程序和后端之间的交互,当然这里的说的前后端都是独立的不在一个项目文件中。当前端程序运行去利用一些手段(比如ajax)去请求后端的数据,由于前端运行的所用的端口或者IP和后端的不一样,这就产生了跨域访问。


给大家展示一张截图,看下跨域访问时报的错:

Asp.Net中WebApi解决跨域方法


解决办法:

前台的话解决办法:

      可以用JsonP进行解决跨域的问题,怎样使用JsonP大家可以进行去查下,很简单。

重点来了:

后端的解决办法:(WebApi中的跨域解决)

方法一:在webconfig的配置文件中添加下面的代码:

//这个节点必须放在 <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>

方法二:

①:在NuGet的管理程序包进行下载一个插件microsoft.aspnet.webapi.cors

Asp.Net中WebApi解决跨域方法

②:在AppStart文件夹中的WebApiConfig的类里进行配置

Asp.Net中WebApi解决跨域方法


这样就把WebApi的跨域问题解决了。

展示效果:我的后台数据已经拿到了,说明跨域问题解决了。

Asp.Net中WebApi解决跨域方法


结尾:

        分享:不论你在什么时候开始,重要的是开始之后就不要停止!