web-dev-qa-db-ja.com

Angular CORSが原因でリクエストがAPIコントロールにアクセスできない

プロフィール写真をアップロードするだけのエンドポイントがあります。私がCORSを有効にしているにもかかわらず、フロントエンドチームは、以下のエラーのためにエンドポイントに到達できないことを通知し続けます。

zone.js：2990 ' https://gogobioimages.testortami.com/api/Image/PostAccountPicture 'のXMLHttpRequestへのアクセス元 ' http：// localhost：42 から'CORSポリシーによってブロックされました：プリフライトリクエストへの応答がアクセス制御チェックに合格しません：HTTP okステータスがありません。

彼らはAngularで開発しています。一方、モバイルチーム（Xamarinで開発中）は、そのエンドポイントに到達しても問題はありません。以下は、APIコントローラーの内訳です。

_[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]_ヘッダーが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内部サーバーエラーが発生し始めます。

以下は、他の提案に従って編集した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("*","*","*")]を設定し、_WebApiConfig.cs_にconfig.EnableCors()を設定するだけで十分でした。 web.configファイルにあるもの。

今、私はフロントエンドが自分のエンドポイントに到達するために何を維持するのか何も考えていません。

前もって感謝します！

c#angularcorsasp.net-web-api2
3
RaZzLe

angularを使用して開発し、ブラウザーとバックエンドの間にローカルサーバーを使用している場合（コードの変更時にオンザフライでGUIを更新するため）、同じ問題が発生しました）。 Allow CORS Plugin Chrome（そして私は他のブラウザだと思います）がページを処理するときに嫌いAPI呼び出しが送信されるサーバーと同じではありません。

もちろん、ブラウザーは予期されたサーバーに到達しており、中間サーバーの一種ではないため、これは本番環境では問題になりません。

1
Bruno Belmondo

angular end in cross-Origin/cross-domainを送信してみてください：true以下のように
headers：{'Authorization'： 'Basic' + localStorage.getItem（ 'currentUser'）、 'Access-Control-Allow-Origin'： '*'、 'Access-Control-Allow-ヘッダー '：' Origin、X-Requested-With、Content-Type、Accept '}

0
Ravi Kumar Kasim