我正在try 向angular2应用程序添加basic authentification.

public login() {
    // Set basic auth headers
    this.defaultHeaders.set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password));

    console.log('username', this.username)
    console.log('password', this.password)
    console.log(this.defaultHeaders)

    // rest is copy paste from monbanquetapiservice
    const path = this.basePath + '/api/v1/development/order';        

    let req = this.http.get(path, { headers: this.defaultHeaders });
    req.subscribe(
        _ => { },
        err => this.onError(err)
    );
}

我希望看到的是一个GET请求,带有我输入的Authorization个标题.

但我看到的是第一个OPTIONS,标题如下:

OPTIONS /api/v1/development/order HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,fr;q=0.4

因为我的服务器不允许在这个url上使用OPTIONS,所以我收到一个错误.

我知道有些方法,比如PUT或POST,会先发送一个OPTIONS方法来预处理请求,但GET没有.

为什么angular2的http首先发送选项?

谢谢

推荐答案

这就是CORS的工作方式(使用跨域请求时).使用CORS,远程Web应用程序(这里是带有域mydomain.org的应用程序) Select 是否可以通过一组特定的头来满足请求.

CORS规范区分了两种不同的用例:

  • Simple requests美元.如果我们使用HTTP GET、HEAD和POST方法,则适用此用例.对于POST方法,仅支持具有下列值的内容类型:文本/纯文本、应用程序/x-www-form-urlencode和multipart/form-data.
  • Preflighted requests.当"简单请求"用例不适用时,会发出第一个请求(使用HTTP选项方法)来判断在跨域请求的上下文中可以做什么.

发送选项请求的不是Angular2,而是浏览器本身.这与Angular 无关.

有关更多详细信息,请参阅本文:

Angular相关问答推荐

cat Owl carousel 位置下一个和上一个图片

我使用Ngrx的子集 Select 器不起作用

try 测试具有Angular material 下拉列表的组件时,在Angular 17中发现&q;错误的意外合成属性@TransitionMessages

Angular KendoGrid RowReorderable,drop不适用于新添加的行

当元素在元素上使用迭代变量时,如何重构ngFor?

除非将 signal.set 作为间隔的一部分调用,否则Angular 信号效果不会执行

ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

完成行为主体

Angular APP_INITIALIZER 中的 MSAL 身份验证

PrimeNG:如何以编程方式更改分页器中的选定页面?

Angular 项目构建仅在 GitHub Actions 上失败

无法推送 Angular 项目 - Github

清除Angular2中的输入文本字段

Observable.forkJoin 和数组参数

如何在angular 5 中获取基本网址?

来自 ngFor 项的动态 routerLink 值给出错误Got interpolation ({{}}) where expression was expected

material Angular手风琴header/title高度

Angular2 中的providers提供者是什么意思?

angular2中的httpinterceptor类似功能是什么?

具有多个订阅者的 Angular 2 Observable