Angular 2 – 使用Windows身份validation消费平静的API调用
我有一个.net Web API托pipe在使用Windows身份validation的远程服务器上的IIS 7上。 我想要使用TypeScript和节点来访问使用Angular 2的web api。 早些时候，我得到一个错误'对预检请求的响应没有通过访问控制检查：没有'访问控制允许来源'标题出现在请求的资源'
我在托pipe的应用程序的web.config中添加了这个
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> 但是现在我得到了未经授权的401错误。 我已阅读有关添加以下代码，以允许跨域访问 – 但我不知道我在哪里添加angular2应用程序，以及如何编译。
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.')); }
任何帮助解决这个问题将是伟大的。
您需要检查Authorization标头是否在请求中正确发送。 如果您忘记导入Headers类，则不会发送标题：
import {Http, Headers, ...} from 'angular2/http';
另一种select是，由于您处于预检查请求（具有Authorization标头的GET方法）的情况下，发送OPTIONS请求。 事实上，这个请求是由浏览器透明地发送的，并且证书是存在的。 所以你不必在服务器端检查安全性。 否则，你将有一个401错误，因为服务器将无法validation请求…
看到这些文章的更多细节：
在ASP.NET Core解决scheme中使用Angular 2时，我偶然发现了同样的问题。 对我来说，我已经明确指定withCredentials: true ：
getSomeModels() { return this.http.get(this.apiBasePath + 'models', { withCredentials: true }) .map(res => res.json()); }
必须在服务器端（Web API）上启用CORS，并且客户端不需要其他更改。
注意：服务器端代码启用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"); }