APIのWebAPIエンドポイントを設定していますが、PostRegisterメソッドへのAngularJS呼び出しを機能させるのに問題があります。
WebAPIとAngularは別のサイトにあります。
私が持っているStartup.csで:
public void Configuration(IAppBuilder app)
{
ConfigureOAuth(app);
var config = new HttpConfiguration();
WebApiConfig.Register(config);
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.UseWebApi(config);
}
private void ConfigureOAuth(IAppBuilder app)
{
var oAuthServerOptions = new OAuthAuthorizationServerOptions
{
AllowInsecureHttp = true,
TokenEndpointPath = new PathString(Paths.TokenPath),
AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(30),
Provider = Kernel.Get<IOAuthAuthorizationServerProvider>()
};
app.UseOAuthAuthorizationServer(oAuthServerOptions);
OAuthBearerOptions = new OAuthBearerAuthenticationOptions();
app.UseOAuthBearerAuthentication(OAuthBearerOptions);
}
次に、コントローラーで、匿名を許可するように設定されたメソッドがあります。
[AllowAnonymous]
public bool PostRegister(UserSignupForm form)
{
...
}
Web.configも更新しました:
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
Angular側では、単純な$ http.post呼び出しを行います:
saveRegistration: function (registration) {
return $http.post(baseUrl + '/api/signup/register', registration).then(function (response) {
return response;
});
}
Postmanを使用して電話をかけると正常に応答しますが、Angularから同じ電話をかけると405エラーが表示されます。
BitOfTechサンプルサイトは同じリクエストヘッダーを送信していますが、Access-Control-Allow-XXXヘッダーを取得できます
次のようにコードを更新しました ASP.NET Web API 2、Owin、およびIdentityを使用したトークンベースの認証
最近同様の問題がありました。プリフライトOPTIONS
リクエストのコントローラーハンドラーを追加し、問題を解決しました。
[AllowAnonymous]
[Route("Register")]
[AcceptVerbs("OPTIONS")]
public async Task<IHttpActionResult> Register()
{
return Ok();
}
アプリケーションで応答ヘッダーのcorsを許可する必要がある場合があります。以下はノードで何をするかのサンプルです。
res.header('Access-Control-Allow-Origin', '*');
res.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
これはあなたを助けるでしょう。ありがとう。
問題は角度にありません。 Postman で応答が返されますが、angularでは問題ではありません。この要求では応答が返されません。問題は、デフォルトではPostmanがOrigin attribute
、これはCORSのテストに必要です。 ChromeはデフォルトでOrigin属性をブロックするため、リクエストは別のドメインからのものであるかのように処理されません。
PostmanでCORSをテストする方法
別のchrome同じ名前の拡張子 POSTMAN-Rest Client(Packaged App)) が必要であり、その「リクエストインターセプタートグルスイッチ」を使用して、元の属性。
ここを読む 、セクションrestricted header
以下は、Origin属性を送信しない場合のサンプルスクリーンショットです。
および同じリクエスト; Origin属性を送信したときのPOSTMANの応答
つまり、Originを追加するときに、応答としてACCESS-CONTROL- *属性を取得した場合にのみ表示されます。
これもあなたの質問に答えることを願っています
BitOfTechサンプルサイトは同じリクエストヘッダーを送信していますが、Access-Control-Allow-XXXヘッダーを取得できます "
Web APIパーツ
ケースに戻ると、web-apiでCORSが有効になっていません。まず、web-apiでCORSを有効にします。 CORSをグローバルに有効にするには
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
var cors = new EnableCorsAttribute("www.example.com", "*", "*");
config.EnableCors(cors);
// ...
}
}
-コントローラーレベルで追加する方法など、ネット周辺のリソースをたくさん見つけることができます。
角度パーツ
最初にCORSがPOSTMANで機能していることを確認してから、そのURLに角度を付けてアクセスする必要があります。
angularでcorsを有効にするには、app.config()関数の以下のコードが必要です。
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
注:エキスパート向け
Origin attributes is needed to test CORS.
この部分についてはよくわかりませんが、Postmanで見た反応のとおりです。誰かが役割に光を当てることができれば素晴らしいでしょうOrigin attribute
Cors内。
これはクロスオリジンの問題のように聞こえます。 Fiddlerをインストールし、別のOriginでリソースを呼び出すときにブラウザーが発行するプリフライトリクエスト(OPTIONS動詞)によって405応答が発生するかどうかを確認する必要があります。
[〜#〜] cors [〜#〜] の適切な説明については、この記事を参照してください: http://www.html5rocks.com/en/tutorials/cors/
あなたはあなたのAPIコントローラにアノテーションが不足していると思います、あなたはAPIControllerにアノテーションを追加する必要があります
[RoutePrefix("api/signup")]
それ以外の場合、WebApiConfig
は以下のようにルートを定義する必要があります
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
CORSを設定するには、サーバーへの呼び出しごとに常に資格情報を送信する必要があります。次に、これを行う簡単な方法がありますangular$ httpプロバイダーのデフォルトを設定するオプション。
これはangularの設定フェーズで行うことができます。
[〜#〜]コード[〜#〜]
angular.module('myApp',[])
.config([
'$httpProvider',
function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}
]);
上記の設定では、各$ http呼び出しに認証情報が追加されます。
this の投稿も参照してください。何と同じ問題。
これは問題の解決に役立つ場合があります。ありがとう。