Angular 2 - 使用Windows身份验证消费平静的API呼叫

Question

我有一个.net Web API托管在使用Windows身份验证的远程服务器上的IIS 7上。我想使用使用TypeScript和节点来访问网络api。早些时候，我收到一个错误“回应预检要求未通过访问控制检查：没有‘访问控制允许来源’标头出现在所请求的资源”我说这对托管应用程序的

web.config中

<httpProtocol> 
<customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*" /> 
</customHeaders> 

但现在我得到未经授权的401错误。我已阅读有关添加以下代码以允许跨域访问 - 但我不知道我在哪里添加角2应用程序以及如何编译。

app.use(function(req, res, next) { 
res.header("Access-Control-Allow-Origin", "*"); 
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,  Content-Type, Accept"); 
next(); 
}); 
app.get('/', function(req, res, next) { 
// Handle the get for this route 
}); 
app.post('/', function(req, res, next) { 
// Handle the post for this route 
}); 

这里是服务的示例代码中，我试图使获得与

@Injectable() 
export class TodoService { 
todos$: Observable<Todo[]>; 
private _baseUrl: string; 
private _todosObserver: Observer<Todo[]>; 
private _dataStore: { 
    todos: Todo[] 
}; 

constructor(private _http: Http) { 
    //let headers: Headers = new Headers(); 

    this._baseUrl = 'http:/SampleServer/Server/api/LoadTodo'; 
    this.todos$ = new Observable(observer => this._todosObserver = observer).share(); 
    this._dataStore = { todos: [] }; 
} 

loadTodos() { 
    let headers: Headers = new Headers(); 
    //headers.append('Access-Control-Allow-Origin'); 
    headers.append('Authorization', 'Basic ' + 
     btoa('username:password')); 
    //let opts: RequestOptions = new RequestOptions(); 

    //opts.headers = headers; 
    this._http.get(`${this._baseUrl}`,headers).map(response => response.json()).subscribe(data => { 
     this._dataStore.todos = data; 
     this._todosObserver.next(this._dataStore.todos); 
    }, error => console.log('Could not load todos.')); 
} 

任何帮助呼吁解决这一问题将是巨大的。

Answer 1

您需要检查Authorization标头是否在请求中正确发送。如果您忘记导入Headers类，头不会被发送：

import {Http, Headers, ...} from 'angular2/http'; 

另一种选择是，由于你在预检请求（GET方法与Authorization头）的情况下，选项请求被发送。事实上，这个请求是由浏览器透明地发送的，并且其中存在证书。所以你不必在服务器端检查安全性。否则，你将有一个401错误，因为服务器将无法进行身份验证的请求......

请参阅以下文章了解详情：

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Answer 2

在ASP.NET Core解决方案中使用Angular 2时，我偶然发现了同样的问题。对于我来说，我有明确的指定withCredentials: true：

getSomeModels() { 
     return this.http.get(this.apiBasePath + 'models', { withCredentials: true }) 
      .map(res => res.json()); 
    } 

CORS必须在服务器端（网页API），并没有其他变化启用被要求在客户端上。

注：服务器端代码启用CORS（Startup.cs）

public void ConfigureServices(IServiceCollection services) 
{ 
    // injected services 
    services.AddAuthorization(); 
    services.AddMvc(); 

    //db context 

    var corsBuilder = new CorsPolicyBuilder(); 
    corsBuilder.AllowAnyHeader(); 
    corsBuilder.AllowAnyMethod(); 
    corsBuilder.AllowAnyOrigin(); // For anyone access. 
    corsBuilder.AllowCredentials(); 

    services.AddCors(options => 
    { 
     options.AddPolicy("SiteCorsPolicy", corsBuilder.Build()); 
    }); 
} 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
     // middleware configuration 

     app.UseCors("SiteCorsPolicy"); 
}