前后端分离:WebAPI+Vue开发——远程数据请求axios

前后端分离:WebAPI+Vue开发——跨域设置

前后端分离:WebAPI+Vue开发——身份认证

本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。

一般情况下,前端和后端在两个项目中,在部署的时候就要部署在两个域名下,如前端域名:http://www.abc.com/,WebAPI域名http://api.abc.com/,这就产生了跨域的问题,跨域的时候会出现这样的错误提示:

“Failed to load http://api.abc.com/api/user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.abc.com' is therefore not allowed access.”

大概意思就是http://www.abc.com没有从WebAPI接口http://api.abc.com/获取数据的权限,要明确的一点是,这是js上异步请求的保护机制,不是axios独有的问题,处理方法这篇博客有详细说明:(web api 跨域请求,ajax跨域调用webapi)。

我采用的方式是修改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>

其中value="*",也可以修改为value="http://www.abc.com"(注意域名后面不带"/");前者是取消所有域名对webapi的访问限制,后者是指定单个域名有访问权限。

这样处理之后完了吗?还没完。。。上的引用的博客中用一句话简单的说了下OPTIONS处理的,但是没说为什么要处理OPTIONS,而且处理方法是需要对每个控制器修改,这个不太方便。

为什么会有OPTIONS请求?这是主流浏览器跨域请求的机制,在POST请求之前,先发送一个OPTIONS预请求,预请求返回状态码正常的情况下才发送我们真正想要的POST请求,通俗点说,就是POST先找个小弟OPTIONS探探路,小弟说这条路能走,POST才走。这篇文章讲的更详细一点(.net mvc webapi 处理跨域请求)。

提供两种处理方法:

一、在global中添加上对OPTIONS方法的处理 

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.End();
    }
}

二、去掉或注释掉配置文件system.webServer标签中的

<remove name="OPTIONSVerbHandler"/>这个标签在跨域请求里边真是一个大坑(后来求证发现这其实不是坑,允许OPTIONS请求会增加跨站攻击,服务端风险太大),它应该是表示不接收OPTIONS请求,预请求没结果,后面的请求是不会执行的。

我验证的结果是,上面两种方法,任选一种都可以解决问题。不过我还发现一种情况,在找到上面的解决方案之前,做post请求测试的时候,如果不传递参数,服务端不对options请求进行上面的处理也能正常返回,因为浏览器的NetWork中显示,浏览器没有发出options预请求。

 

Logo

前往低代码交流专区

更多推荐