Javascript 带凭据的angular2 xhrfields为true

我正在尝试登录到一个系统。在angular 1中，有一些方法可以设置

withCredentials:true

但我在angular2找不到有效的解决方案

export class LoginComponent {
    constructor(public _router: Router, public http: Http, ) {

    }


    onSubmit(event,username,password) {
        this.creds = {'Email': 'harikrishna@gmail.com','Password': '01010','RememberMe': true}
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');

        this.http.post('http://xyz/api/Users/Login', {}, this.creds)
              .subscribe(res => {
                  console.log(res.json().results);

              });
     }

}

好吧，现在（beta.1版）该选项不可用

你必须用这样的方法来解决这个问题：

let\u build=http.\u backend.\u browserXHR.build；
http.\u后端.\u browserXHR.build=（）=>{
让_xhr=_build（）；
_xhr.withCredentials=true；
返回xhr；
};

我认为你没有正确使用

post

method。你可以试试这样的方法：

onSubmit(event,username,password) {
  this.creds = {
    'Email': 'harikrishna@gmail.com',
    'Password': '01010','RememberMe': true
  }

  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json');

  this.http.post('http://xyz/api/Users/Login', 
                 JSON.stringify(this.creds),
                 { headers: headers });
}

可以反转参数。第二个参数对应于要发送到POST的内容，应定义为字符串。此级别尚不支持对象。请参阅此问题：

如果要设置特定的头，需要在

post

方法的第三个参数中添加

headers

对象

否则，如果您想在跨域请求中发送cookie，我认为

withCredentials

属性与CORS相关。有关更多详细信息，请查看此链接：

希望它能帮助你，

---

Thierry

angular2团队已经注意到了这个问题

---

根据cexbrayat的回答，如果有人使用纯JS，您可以在下面找到一些其他解决方法（其中一个特别写为@Injectable）：

app.Service = ng.core
    .Class({
        constructor: [ng.http.Http, function(Http) {
            this.http = Http;
            var _build = this.http._backend._browserXHR.build;
            this.http._backend._browserXHR.build = function() {
                var _xhr = _build();
                _xhr.withCredentials = true;
                return _xhr;
            };
        }],

在Angular>2.0.0（实际上是从RC2开始）中

getHeaders（）：请求选项{
让optionsArgs:RequestOptionsArgs={withCredentials:true}
let options=新请求选项（optionsArgs）
返回选项；
}
getAPIData（apiName）：可观察{`在此处输入代码`
console.log（Constants.API_URL+apiName）；
让headers=this.getHeaders（）；
返回此文件。http
.get（Constants.API_URL+apiName，标题）
.map（（res:Response）=>res.json（））
}

在webapi中启用cors

同样的代码在chrome（普通）、Internet explorer中也能正常工作

但它在匿名的chrome、firefox和edge中要求windows登录提示。

---

分享解决问题的建议

这在chrome和firefox中有效，但safari失败。有什么想法吗？不是特别针对这一个，但是Safari（比如国际化API）在当前的测试版（beta.7）中仍然存在一些问题。你能让我知道你正在用API发送什么头吗？这是我正在发送的头={headers:新头吗({'Accept'：'application/json'，'Content Type'：'application/json'}；我已经登录了login.service.ts（离子2），我应该把这段代码放在哪里才能让它发挥作用？这对我来说非常有效。谢谢！你用它构建了单元测试吗？我很难模仿这部分。我花了很长时间寻找它…谢谢。同样，我花了大量时间试图解决这一问题。我遇到的一个问题是我没有真正理解它我知道问题是什么（或者至少花了一段时间才找到）。我所看到的是，我得到了401对一个看似完美的请求的响应。链接无效是有效的…嗯，这是链接的生命周期：（我在某个地方读到这篇文章，认为在anwswers上随机发布链接不是一个好主意，因为它们可能会随着时间的推移而消失。链接是好的，但至少应该复制粘贴有意义的内容：）

http.get('http://my.domain.com/request', { withCredentials: true })

getHeaders(): RequestOptions {
    let optionsArgs: RequestOptionsArgs = { withCredentials: true }
    let options = new RequestOptions(optionsArgs)
    return options;
  }

getAPIData(apiName): Observable<any> {`enter code here`
    console.log(Constants.API_URL + apiName);
    let headers = this.getHeaders();
    return this.http
      .get(Constants.API_URL + apiName, headers)
      .map((res: Response) => res.json())
  }