CORAP WebAPIの問題

私はデフォルトのコントローラを備えたシンプルなwebapiプロジェクトを持っています。私は、ajaxリクエストを使用してhtmlページから同じ値にアクセスする必要があります。CORAP WebAPIの問題

要件：

トークン方式
を使用してトークンがトークンを渡すと値

クライアント側をゲット：

次は私のhtmlですページには2つのボタンがあります。最初にトークンを取得し、手動でヘッダーを更新し、2番目のボタンを使用して値を取得します。

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#btnToken").click(function() { 
       var loginData = { 
        grant_type: 'password', 
        username: '[email protected]', 
        password: 'MyPassword' 
       }; 

       $.ajax({ 
        type: 'POST', 
        url: "http://172.16.2.19:8080/Token", 
        datatype: 'json', 
        data: loginData, 
        success: function (result) { 
         alert(JSON.stringify(result)); 
         console.log(JSON.stringify(result)); 
        }, 
        error: function (error) { 
         alert(JSON.stringify(error)); 
        } 
       }); 
      }); 

      function setHeader(xhr) { 
       xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); 
       xhr.setRequestHeader('Authorization', 'bearer 2wj036uRh7i2DpGAhzNOHuxb1TZcRWVkq_xU3mKGh6e4sO4hdwqaoJLeAAf_hoQewwYxnauUyFXev15oLOybwGDm-KDm-6TXvOSnby-7zYkN7UxNgHlna00hfure3VLYhPclZrQT591qWtH9oeIjc3AyXwJE7N_qhfZxvJKPUp5lTgzVJ9SBbTBOlyKnirUvJxwIrEwKABoNuRW6PbveTGs9i4osCI19mtkG53XB87-g2nwiWu2d2aw12WlT9ShFgf70cDgJMh84KY9eG4Mn9I1EJ2SgZI_i1CSoHktx5W6L8NbZqfv-Nd8qb_tjcw_eIJxZk7RSIDF2p42nVnUNXWJSivgcxNKaTr0KTlmK7PPYLtyyWNiIejZHDlXyBexy_Rmases9TGkIT5h1cpF8E3VNg7zMYCMAflJDYH_0Lj0siQ4QfNAYKB0D3hreEd3qW13YEpWcsGaR2uBI5Qc1l3N44Fyc_d-zLJP_lX8jhYE'); 
      } 

      $("#btnData").click(function() { 

       $.ajax({ 
        type: 'GET', 
        url: "http://172.16.2.19:8080/api/values", 
        content_type: 'application/json; charset=utf-8', 
        beforeSend: setHeader, 
        success: function (result) { 
         alert(JSON.stringify(result)); 
         console.log(JSON.stringify(result)); 
        }, 
        error: function (error) { 
         alert(JSON.stringify(error)); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <button id="btnToken" name="btnToken">Token</button> 
    <button id="btnData" name="btnData">Data</button> 
</html>

サーバーサイド：

私はまた、以下のようにglabal.asaxにプリフライトリクエストを追加したコードでCORSを有効にして、私のapiconfigに

public static class WebApiConfig 
{ 
    public static void Register(HttpConfiguration config) 
    { 
     // Web API configuration and services 
     var cors = new EnableCorsAttribute("*", "*", "*"); 
     config.EnableCors(cors); 

     // Configure Web API to use only bearer token authentication. 
     config.SuppressDefaultHostAuthentication(); 
     config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); 

     // Web API routes 
     config.MapHttpAttributeRoutes(); 

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

を以下のように持っています。

protected void Application_BeginRequest() 
    { 
     if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") 
     { 
      Response.Headers.Add("Access-Control-Allow-Origin", "*"); 
      Response.Headers.Add("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Origin, Content-Type, Authorization"); 
      Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS"); 
      Response.Headers.Add("Access-Control-Max-Age", "1728000"); 
      Response.End(); 
     } 
    }

しかし、クロムをチェックすると、コンソールで次のエラーが表示されます。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、原点「ヌル」はアクセスが許可されません。私はIEを使用している場合

はエラーが

元のファイルのようになります。アクセス制御 - 許可 - 起源ヘッダーでは見られません。

私はあなたがあなたのEnableCors方法にごEnableCostAttributeインスタンスに渡す必要があり、私は

出典

2017-11-20 Akhil

あなたが提供することができます詳細情報： - アクセスしようとしているコントローラー。 - 認証時、またはハードコード化された認証 – codeplay

を使用して値を取得しようとしているときにコンソールのエラーが発生しました。こんにちは、webapiテンプレートでデフォルトで作成された2つのコントローラのアカウントと値があります。私が更新した – Akhil

間違って何をしたか分からない：

var cors = new EnableCorsAttribute("*", "*", "*"); 
config.EnableCors(cors); // <----

出典

2017-11-20 10:27:29

。私の価値観は今正しく働いています。トークンの要求で私は同じエラーが発生している、私はポストリクエストで意味する – Akhil

はファイルApp_Start/WebApiConfig.csを開きます。 WebApiConfig.Registerメソッドに次のコードを追加します。

using System.Web.Http; 
namespace WebService 
{ 
    public static class WebApiConfig 
    { 
     public static void Register(HttpConfiguration config) 
     { 
      // New code 
      config.EnableCors(); 

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

次に、TestControllerクラスへ[EnableCors]属性を追加します。あなたはOAuthAuthorizationServerProviderを使用している場合、あなたはこのようないくつかの操作を行うことを試みることができ

using System.Net.Http; 
using System.Web.Http; 
using System.Web.Http.Cors; 

namespace WebService.Controllers 
{ 
    [EnableCors(origins: "*", headers: "*", methods: "*")] 
    public class TestController : ApiController 
    { 
     // Controller methods not shown... 
    } 
}

を：

public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider 
    { 
     public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context) 
     { 
      context.Validated(); 
      return Task.FromResult<object>(null); 
     } 

     public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) 
     { 
      context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 



     } 
    }

出典

2017-11-20 10:56:13

私は値コントローラのサンプルデータにアクセスすることができます。トークン・メソッドの要求が入ってきます。トークンはIDの一部であるため、私は特定のコントローラに与えることはできません – Akhil

@Akhil私は自分の答えを更新しました。 –

ありがとうございます。しかし、今私は解決策を得た。グローバルファイルのヘッダーを削除してweb.configを追加するだけです – Akhil

答えて

関連する問題