c# - 由于 CORS，Angular 请求无法访问 API 控制

Question

我有一个端点，它只上传个人资料图片。尽管我启用了 CORS，但前端团队一直告诉我，由于以下错误，他们无法到达该终点:

zone.js:2990 Access to XMLHttpRequest at 'https://gogobioimages.testortami.com/api/Image/PostAccountPicture' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

他们正在 Angular 上开发。另一方面，移动团队(在 Xamarin 上开发)在达到该终点方面没有任何问题。以下是我对 API Controller 的分割。

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class BaseController : ApiController
{
    //common methods used on every controller written here
}

并且，这里是包含图像上传方法的端点:

public class ImageController : BaseController
{
    [IdentityBasicAuthentication]
    [Authorize]
    public HttpResponseMessage PostAccountPicture()
    {
        //some code here
    }
}

首先，这些[Authorize]和 [IdentityBasicAuthentication] header 放在 ImageController 的顶部，但我读到这种情况最终可能会混合请求管道，所以我将它们移到了操作的顶部(虽然没有解决问题)。

我的 web.config 中也有这些 customHeader 行:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Credentials" value="true"/>
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, OPTIONS" />
  </customHeaders>
</httpProtocol>

并且，我的处理程序描述如下:

<handlers>
  <remove name="WebDAV" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <!--<remove name="OPTIONSVerbHandler" />-->
  <remove name="TRACEVerbHandler" />
  <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" requireAccess="None" responseBufferLimit="4194304" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

一开始，我没有name="OPTIONSVerbHandler" .将其添加到 web.config 后，移动请求开始出现 500 Internal Server Error。

下面是我的 Global.asax，我根据其他建议对其进行了编辑(Application_BeginRequest 未包含在开头):

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        GlobalConfiguration.Configure(WebApiConfig.Register);
        GlobalConfiguration.Configuration.Formatters.Add(new FormMultipartEncodedMediaTypeFormatter());
    }

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.Flush();
        }
    }
}

最后，我的WebApiConfig类如下:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

我还让我的前端伙伴与我分享她的 ajax 请求。是这样的:

  $("form").submit(function(evt){evt.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({
url: 'https://<our subdomain name is here>/api/Image/PostAccountPicture',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
headers: {'Authorization':'Basic ' + localStorage.getItem('currentUser')} ,
success: function (response) {
  alert(response);
}});return false;});

我之前的项目也开启了CORS，设置[EnableCors("*","*","*")]就够了在 Controller 类上制作config.EnableCors()在 WebApiConfig.cs没有上面显示的所有其他调整，如 web.config 文件中的调整。

现在，我不知道是什么让前端到达我的终点。

提前致谢!

Answer 1

在使用 Angular 进行开发并在我的浏览器和后端之间使用本地服务器时，我遇到了同样的问题(以便在代码更改时即时更新图形用户界面)。我们通过添加 Allow CORS Plugin 解决了这个问题Chrome(我想还有其他浏览器)不喜欢处理页面的服务器与发送 api 调用的服务器不同。

这在生产环境中当然不是问题，因为浏览器正在到达预期的服务器，而不是中间服务器中的一种人。