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

前后端分离：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预请求。