关于angularjs–CORS预检请求在Azure托管的WebAPI中响应302重定向的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Angular2–在Azure中托管时页面刷新404
关于angularjs – CORS预检请求在Azure托管的Web API中响应302重定向的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Angular2 – 在Azure中托管时页面刷新404、AngularJS 2调用.net core WebAPI的几个坑、angularjs – $http：如何使用CORS从WebApi获取头文件名、angularjs – Angular JS MVC Web API模型/参数不绑定.NET Core等相关知识的信息别忘了在本站进行查找喔。
本文目录一览：- angularjs – CORS预检请求在Azure托管的Web API中响应302重定向
- Angular2 – 在Azure中托管时页面刷新404
- AngularJS 2调用.net core WebAPI的几个坑
- angularjs – $http：如何使用CORS从WebApi获取头文件名
- angularjs – Angular JS MVC Web API模型/参数不绑定.NET Core
angularjs – CORS预检请求在Azure托管的Web API中响应302重定向
我有两个在Windows Azure上单独托管的ASP.NET Web应用程序,它们都与同一个Azure Active Directory租户相关联：
>带有AngularJS SPA前端的MVC应用程序和用于在客户端上处理Azure AD身份验证的adal.js库.
>带有Microsoft OWIN中间件的Web API,用于在服务器上处理Azure AD身份验证.
问题：
当角度引导客户端应用程序时,页面在通过oauth重定向到正确的Identity Authority后正确加载,并且adal.js库正确检索并存储每个应用程序的不同令牌(通过检查“资源/会话 – 存储”选项卡进行验证Chrome开发工具).但是,当客户端应用程序尝试访问或更新API中的任何数据时,CORS预检请求正在响应302重定向到Identity Authority,这会导致控制台中出现以下错误：
XMLHttpRequest cannot load 07001.
The request was redirected to
‘07002{authority-guid}/oauth2/authorize?response_type=id_token&redirect_uri=….etc..etc..’,
which is disallowed for cross-origin requests that require preflight.
示例标头(匿名)：
Request
OPTIONS /api/items HTTP/1.1
Host: webapi.azurewebsites.net
Connection: keep-alive
Access-Control-Request-Method: GET
Access-Control-Request-Headers: accept,authorization
Origin: https://mvcapp.azurewebsites.net
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/39.0.2171.99 Safari/537.36
Accept: */*
Referer: https://mvcapp.azurewebsites.net/
Response
HTTP/1.1 302 Found
Content-Length: 504
Location: https://login.windows.net/{authority-guid}/oauth2/authorize?response_type=id_token&redirect_uri=https%3A%2F%2F....etc..etc.%2F&client_id={api-guid}&scope=openid+profile+email&response_mode=form_post&state=...etc...
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=4f51...snip....redact....db6d;Path=/;Domain=webapi.azurewebsites.net
我做了什么/尝试过
>确保Azure AD租户允许OAou2隐式流,如here和其他地方所述.
>确保API exposes access permissions和MVC / SPA registers for access使用那些公开的权限.
>在API的web.config中明确添加了一个OPTIONS动词处理程序(见下文).
>使用在API服务器上启用CORS的各种组合,OWIN本身以及EnableCorsAttribute(见下文).
问题
有没有办法让Azure AD租户关联的Web API不重定向CORS预检请求？
我在adal.js库和/或OWIN启动代码中缺少一些初始化设置(见下文)？
Azure门户中是否有允许OPTIONS请求通过OWIN管道的设置？
相关代码：
adal.js初始化
angular.module("myApp",["ngRoute","AdalAngular"])
.config(["$routeProvider","$locationProvider","$httpProvider","adalAuthenticationServiceProvider",function ($routeProvider,$locationProvider,$httpProvider,adalProvider) {
$routeProvider.when("/",{ // other routes omitted for brevity
templateUrl: "/content/views/home.html",requireADLogin: true // restrict to validated users in the Azure AD tenant
});
// CORS support (I've tried with and without this line)
$httpProvider.defaults.withCredentials = true;
adalProvider.init({
tenant: "contoso.onmicrosoft.com",clientId: "11111111-aaaa-2222-bbbb-3333cccc4444",// Azure id of the web app
endpoints: {
// URL and Azure id of the web api
"https://webapi.azurewebsites.net/": "99999999-zzzz-8888-yyyy-7777xxxx6666"
}
},$httpProvider);
}
]);
OWIN中间件初始化
public void ConfigureAuth(IAppBuilder app)
{
// I've tried with and without the below line and also by passing
// in a more restrictive and explicit custom CorsOptions object
app.UseCors(CorsOptions.AllowAll);
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationoptions
{
TokenValidationParameters = new TokenValidationParameters
{
// Azure id of the Web API,also tried the client app id
ValidAudience = "99999999-zzzz-8888-yyyy-7777xxxx6666"
},Tenant = "contoso.onmicrosoft.com"
}
);
// I've tried with and without this
app.UseWebApi(GlobalConfiguration.Configuration);
}
WebApiConfig初始化
public static void Register(HttpConfiguration config)
{
// I've tried with and without this and also using both this
// and the OWIN CORS setup above. Decorating the ApiControllers
// or specific Action methods with a similar EnableCors attribute
// also doesn't work.
var cors = new EnableCorsAttribute("https://mvcapp.azurewebsites.net","*","*")
{
cors.SupportsCredentials = true // tried with and without
};
config.EnableCors(cors);
// Route registration and other initialization code removed
}
API OPTIONS动词处理程序注册
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONsverbHandler" />
<remove name="TRACEVerbHandler" />
<add name="OPTIONSHandler" path="*" verb="OPTIONS" modules="IsapiModule" scriptprocessor="C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
相关资源
在某个时间,我已经尝试了以下(以及更多)论坛和博客文章以及github示例代码中的所有可以想象的组合.
> ADAL JavaScript and AngularJS – Deep Dive
> Secure ASP.NET Web API 2 using Azure Active Directory,Owin Middleware,and ADAL
> Token Based Authentication using ASP.NET Web API 2,Owin,and Identity
> AzureADSamples/SinglePageApp-DotNet (github)
> AngularJSCORS (github)
> How to make CORS Authentication in WebAPI 2?
> AngularJS and OWIN Authentication on WebApi
<package id="Microsoft.Owin" version="3.0.0" targetFramework="net45" /> <package id="Microsoft.Owin.Cors" version="2.1.0" targetFramework="net45" />
处理程序的WebConfig选项：
<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>
你正在使用owin config中的specsiying cors选项做对了.
public void ConfigureAuth(IAppBuilder app)
{
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationoptions
{
Audience = ConfigurationManager.AppSettings["ida:Audience"],Tenant = ConfigurationManager.AppSettings["ida:Tenant"]
});
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
}
控制器不需要CORS相关属性.
[Authorize]
public class ContactsController : ApiController
{
// GET api/<controller>
public IEnumerable<string> Get()
{
return new string[] { "person1","person2" };
}
// GET api/<controller>/5
public string Get(int id)
{
return "person" + id;
}
WebAPIConfig不需要与CORS相关的条目.
工作示例如下：https://github.com/omercs/corsapisample
您可以使用以下代码在应用中进行测试：
app.factory('contactService',['$http',function ($http) {
var serviceFactory = {};
var _getItems = function () {
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
return $http.get('http://yourhostedpage/api/contacts');
};
serviceFactory.getItems = _getItems;
return serviceFactory;
}]);
预检回应示例：
Remote Address:127.0.0.1:8888 Request URL:http://localhost:39725/api/contacts Request Method:OPTIONS Status Code:200 OK Request Headersview source Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:accept,authorization Access-Control-Request-Method:GET Host:localhost:39725 Origin:http://localhost:49726 Proxy-Connection:keep-alive Referer:http://localhost:49726/myspa.html User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/39.0.2171.99 Safari/537.36 Response Headersview source Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:authorization Access-Control-Allow-Origin:http://localhost:49726 Content-Length:0 Date:Fri,23 Jan 2015 01:10:54 GMT Server:Microsoft-IIS/8.0 X-Powered-By:ASP.NET
Angular2 – 在Azure中托管时页面刷新404
我的问题是,当我在某些页面上使用浏览器刷新时,我看到一个错误说…
“您要查找的资源已被删除,名称已更改,或暂时无法使用.”
如果我直接点击网址也会发生这种情况.
一个示例网址是……
https://tilecasev2.azurewebsites.net/profile/therichmond
但是,如果您通过主页查看页面,它们可以正常工作,但只能刷新(https://tilecasev2.azurewebsites.net).
我的index.html头文中有以下内容…
<base href="/">
为什么会发生这种情况,我该如何解决？
要使没有哈希的角度路由在本地开发环境中以与在本地开发环境中相同的方式工作,您只需将IIS配置为以root身份重写所有请求.这使角度处理路由.
为此,请使用以下内容将Web.config文件添加到站点的根文件夹：
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
AngularJS 2调用.net core WebAPI的几个坑
总结
以上是小编为你收集整理的AngularJS 2调用.net core WebAPI的几个坑全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
angularjs – $http：如何使用CORS从WebApi获取头文件名
HTTP/1.1 200 OK
Content-Length: 121257
Content-Type: application/pdf
Server: Microsoft-HTTPAPI/2.0
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: *
Content-disposition: attachment; filename=Order-414.pdf
Date: Wed,11 Feb 2015 05:32:25 GMT
我只想在下载时获取文件名(Order-414.pdf)作为pdf名称.但是在这个代码块中：
$http.get(httpPath,{ responseType: 'arraybuffer' })
.success(function (data,status,headers) {
debugger;
// just return content-type
var header = headers();
header对象只包含content-type.
Object {content-type: "application/pdf"}
我在某处读到我们需要为WebAPI配置CORS：
private static void RegisterCorsConfig(HttpConfiguration config)
{
var cors = new EnableCorsAttribute("*","*","*");
//var cors = new EnableCorsAttribute("*","DataServiceVersion,MaxDataServiceVersion");
//cors.ExposedHeaders.Add("*");
//cors.ExposedHeaders.Add("filename");
config.EnableCors(cors);
}
但它仍然无效.请帮我.
提前致谢.
解决方法
cors.ExposedHeaders.Add("Content-disposition");
angularjs – Angular JS MVC Web API模型/参数不绑定.NET Core
我有一个apiService来处理对服务器的所有POST和GET请求,如下所示：
module TBApp {
export class apiService {
static $inject = ['$http','notificationService'];
constructor(private $http,private notificationService: notificationService) {
}
get(url,config,success,failure) {
return this.$http.get(url,config)
.then(result => { this.handleResponse(result,success); },result => { this.handleError(result,failure) });
}
post(url,data,failure) {
return this.$http.post(url,data)
.then(result => { this.handleResponse(result,failure) });
}
handleResponse(result,success) {
alert('success');
success(result);
}
handleError(result,failure) {
if (result.status === '401') {
this.notificationService.displayError('Authentication required.');
//this.$rootScope.prevIoUsstate = this.$location.path();
//this.$location.path('/login');
}
else if (failure !== null) {
failure(result);
}
}
}
}
现在,当我发送此请求时：
onCompanyChanged(selectedCompany,model,companyName) {
this.apiService.post('/api/Dashboard/GetAssetListByCompany',{ companyId: selectedCompany.id },response => {
this.assetListviewmodel = response.data.data;
},response => {
this.notificationService.displayError(response.data.message);
});
}
它没有绑定控制器中的companyId
这是控制器：
[Route("api/[controller]")]
public class DashboardController : BaseController
{
[HttpPost]
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromBody]int companyId)
{
return CreateJsonResult(() =>
{
if (companyId == 0) { return new xPTJsonResult(null,xPTStatusCodesEnum.Success,"Company Id is 0"); }
//var treeModel = _dashboardProvider.GetTreeModelByCompany(companyId,usermodel);
return new xPTJsonResult(null,"Loaded assets successfully");
});
}
}
即使我在浏览器中检查了请求,也表明companyId在Payload中.
NOTE: The same function works when I post a viewmodel
编辑
在上面的场景中,我只将一个参数传递给控制器,但在某些情况下,我希望能够在不使用viewmodel的情况下传递2或3个参数.
例如
public IActionResult GetAssetListByCompany([FromBody]int companyId,[FromBody]int assetId)
{....
要么
public IActionResult GetAssetListByCompany([FromBody]int companyId,[FromBody]int assetId,[FromBody]bool canEdit = false)
{.....
然后在客户端我可以这样做：
this.apiService.post('/api/Dashboard/GetAssetListByCompany',{ companyId: selectedCompany.id,assetId: 123 }.....
要么
this.apiService.post('/api/Dashboard/GetAssetListByCompany',canEdit: true,assetId: 22 }....
解决方法
MVC改变了
有关各种选项,请参阅Model Binding,此处的最佳方法是基于查询字符串进行绑定,因为您只需要一个基本类型.如果您有一个基本类型数组仍然可以绑定到查询字符串,则查询字符串变量名称将为每个值重复一次.
因此,我们所做的唯一更改是指定参数来自查询字符串,并且它与Http Get请求而不是Post相关联.
[Route("api/[controller]")]
public class DashboardController : BaseController
{
[HttpGet] // change to HttpGet
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromQuery]int companyId) // use FromQuery
{
return CreateJsonResult(() =>
{
if (companyId == 0) { return new xPTJsonResult(null,"Company Id is 0"); }
//var treeModel = _dashboardProvider.GetTreeModelByCompany(companyId,usermodel);
return new xPTJsonResult(null,"Loaded assets successfully");
});
}
}
AngularJS发生了变化
我们扩展apiService以允许使用HttpGet传递调用数据.这可以使用params on the $http call完成,它将使用名称作为查询字符串值名称和值作为值部分,根据传入的数据动态创建URL.
export class apiService {
/* all other code is left as is,just change the get method to also accept data via the params. If null is passed in then it is ignored. */
get(url,failure) {
return this.$http({
url: url,config: config,params: data,method: "GET"
})
.then(result => { this.handleResponse(result,failure) });
}
}
在通话中我们只需要从post更改为get,它应该可以工作.
// only change from post to get
onCompanyChanged(selectedCompany,companyName) {
this.apiService.get('/api/Dashboard/GetAssetListByCompany',response => {
this.assetListviewmodel = response.data.data;
},response => {
this.notificationService.displayError(response.data.message);
});
}
编辑 – 这很灵活
更重要的是,这种设计在角度方面是灵活的.如果您扩展MVC操作或具有采取其他参数的各种操作,则无需执行任何其他更改即可运行.例：
[HttpGet]
[Route("GetSomethingElseFromServer")]
public IActionResult GetSomethingElseFromServer([FromQuery]int companyId,[FromQuery]string assetName,[FromQuery]string companyModelNumber) // use FromQuery
对你的角度api的调用将是
this.apiService.get('/api/Dashboard/GetSomethingElseFromServer',{ companyId: companyId,assetName: somePassedInAssetNameVar,companyModelNumber: somePassedInModelNumber }
编辑 – 您也可以发送数组
要回答关于如何将多个基元类型作为数组发送的问题,您可以这样做.同样,这假设它不是您要发送的复杂类型,但是,例如,公司ID列表.
c#代码
[HttpGet]
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromQuery]int[] companyIds) // use an array of int ie. int[]. i changed the variable name to make it clear there can be more than 1
Angular调用,注意没有必要更改服务
onCompanyChanged(selectedCompany,{ "companyIds[]": [id1,id2,id3] },// note the name is Now enclosed in quotes,made plural,and includes []. The value is an array
response => {
this.assetListviewmodel = response.data.data;
},response => {
this.notificationService.displayError(response.data.message);
});
}
编辑 – 如果你想要POST
您目前只发送一个原始字段,因此POST中的MVC框架无法正确反序列化.您需要将参数包装在视图模型中,将其作为查询字符串部分发送,或将其作为表单字段值发送.这是带有查询字符串部分的POST,它可以正常工作.
选项1
将其附加到URL
[HttpPost] // change to HttpGet
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromQuery] int companyId) // use FromQuery
角度呼叫
this.apiService.post('/api/Dashboard/GetAssetListByCompany/?companyId=' + selectedCompany.id +,null,// the rest of the code remains unchanged so I did not include it
选项2
扩展apiService以获取params对象,以便它可以构建您的查询.无论哪种方式,你都会遇到调用者不得不对http调用有所了解.
this.apiService.post('/api/Dashboard/GetAssetListByCompany',{companyId: selectedCompany.id},// the rest of the code remains unchanged so I did not include it
post(url,params,failure) {
return this.$http({
url: url,data: data,params: params,method: "POST"
})
.then(result => { this.handleResponse(result,failure) });
}
选项3
更新视图模型以采用复杂类型,这不需要更改角度代码.
public class ListByCompanyModel {
public int CompanyId {get;set;}
}
[HttpPost] // change to HttpGet
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromBody] ListByCompanyModel model) // use FromQuery
今天关于angularjs – CORS预检请求在Azure托管的Web API中响应302重定向的讲解已经结束，谢谢您的阅读，如果想了解更多关于Angular2 – 在Azure中托管时页面刷新404、AngularJS 2调用.net core WebAPI的几个坑、angularjs – $http：如何使用CORS从WebApi获取头文件名、angularjs – Angular JS MVC Web API模型/参数不绑定.NET Core的相关知识，请在本站搜索。
本文标签：
