一:WebAPI跨域遇到的问题

最近在研究vue+webapi实现前后端分离,在前后端数据交互的时候真的是被跨域的问题搞得我人都要炸了,第一是限制多个域名跨域请求的问题,二是options预请求的问题,三是我使用了owin验证,阻止了跨域,唉,只能怪自己对webapi不熟悉,记录一下避免下次在犯错!
下面列举一下常见的跨域设置方式:

二:常见的跨域设置方式

1:直接在webconfig节点中设置

在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>
    <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>

httpProtocol节点里面增加的是关于跨域的限制,Access-Control-Allow-Origin这个是允许通过跨域的网址,第二个是响应头不用改,默认‘*’也行,第三个是允许通过跨域的方式,下面handlers节点网上的解释是webapi默认是拒绝option请求的需要删除掉OPTIONSVerbHandler,这些都是网上百度的,有些人这样配置了之后就可以了,但我很悲催这样配置之后不行!
下面是第二种解决方式:

2:使用Microsoft.AspNet.WebApi.Cors进行跨域

在项目中用NuGet安装microsoft.aspnet.webapi.cors(支持多个域名跨域)
microsoft.aspnet.webapi.cors多个域名跨域
然后打开App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域
WebApiConfig.cs文件夹配置跨域
代码:

  var allowOrigins = ConfigurationManager.AppSettings["cors_allowOrigins"];
            var allowHeaders = ConfigurationManager.AppSettings["cors_allowHeaders"];
            var allowMethods = ConfigurationManager.AppSettings["cors_allowMethods"];
            var globalCors = new System.Web.Http.Cors.EnableCorsAttribute(allowOrigins,allowHeaders, allowMethods)
            {
                SupportsCredentials = true
            };

在appSettings节点中增加配置:
appSettings节点中增加配置

  <appSettings>
    <add key="cors_allowOrigins" value="http://localhost:8080/,http://novel.xpzzs.top/" />
    <add key="cors_allowHeaders" value="*" />
    <add key="cors_allowMethods" value="*" />
  </appSettings>

一般这样配完就已经成功了,但也有options预请求失败的情况,如果出现这种情况可以直接吧option请求拦截,让它直接返回成功,看看能不能实现跨域!
添加一个类继承HttpModule:

  public class SpecialMethodModule : IHttpModule
    {
        public SpecialMethodModule() { }
        public void Init(HttpApplication app)
        {
            app.BeginRequest += new EventHandler(this.BeginRequest);
        }
        public void Dispose() { }
        public void BeginRequest(object resource, EventArgs e)
        {
            HttpApplication app = resource as HttpApplication;
            HttpContext context = app.Context;
            if (context.Request.HttpMethod.ToUpper() == "OPTIONS")
            {
                context.Response.StatusCode = 200;
                context.Response.End();
            }
        }
    }

三:OWin本身跨域问题

如果上面操作做完都还不行,那么你可以看下引用中是否有添加owin的引用,如果是有OWin,那么极大可能是因为owin的问题,到Startup.cs中找到Configuration方法,在这个方面中添加:

 app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

好了,到这里我终于能够成功的跨域请求了,真心不容易啊!

Logo

前往低代码交流专区

更多推荐