Angular 2.0的Http post请求不发送凭据。

Question

当我从高级客户端rest调用Api时，它可以完美地工作，但当我通过http调用时，它的表现并不如预期。这是因为它没有发送凭证。各位大侠，请帮忙告诉我如何在这里使用withCredentials:true。

以下是我的angular代码：

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http.post('http://localhost/jiffy_fun/laravel/public/token',{headers: headers}).map(res => res.json()).subscribe(res => {this.token = res});

谢谢

- vikram mistry

---

this.http.post 是正确的语法吗？我认为应该用 $http 而不是 http。 - Khalid Hussain

@KhalidHussain 在Angular2中，this.http.post是正确的。$http是来自Angular 1的。 - TheKojuEffect

请参见https://dev59.com/15Lea4cB1Zd3GeqP798a#34710044。 - Günter Zöchbauer

Answer 1

我认为你混淆了两件不同的事情。根据您提供的代码，您想使用Angular2 HTTP类通过AJAX请求从表单发送凭据。在这种情况下，您需要在post方法的第二个参数中提供此内容，如下所述：

var creds = "username=" + username + "&password=" + password;

var headers = new Headers();
headers.append('Content-Type',
         'application/x-www-form-urlencoded');
this.http.post(
    'http://localhost/jiffy_fun/laravel/public/token',
    creds,
    {headers: headers})
.map(res => res.json())
.subscribe(res => {this.token = res});

withCredentials属性与CORS（跨域请求）相关。事实上，CORS在默认情况下不会为此类请求发送cookie。您可以通过在xhr对象上将withCredentials属性设置为true来更改此行为。这个链接可以给你一些额外的提示：http://www.html5rocks.com/en/tutorials/cors/?redirect_from_locale=fr。请查看该链接中的withCredentials部分。

希望对您有所帮助， Thierry

- Thierry Templier

---

我在高级客户端REST中得到了所需的结果，但在Angular中没有。实际上，在Angular发出的每个请求中，它都会创建一个新的会话文件，但是在高级客户端中，它只是更新当前会话。请帮忙... - vikram mistry

你使用哪个REST客户端？你能在问题中告诉我们你在这个客户端中放了什么（头部，负载，HTTP方法）吗？谢谢！ - Thierry Templier

我在问题中提到了它先进的客户端REST。 - vikram mistry

好的，明白了！你能否更新一下你的问题，包括REST高级客户端的请求和响应内容（头部信息、负载、HTTP方法）？谢谢！ - Thierry Templier

Answer 2

我想到了几件事情-你正在执行POST操作，但将头部作为正文发送。

而且，withCredentials可以与以下类似的标头一起设置。 抱歉现在没有时间进行plunkr :S

let headers = {
  'Content-Type' : 'application/x-www-form-urlencoded'
}
let options = new RequestOptions({ headers: headers, withCredentials: true });

this.http.post('http://localhost/jiffy_fun/laravel/public/token',JSON.stringify({}),options).map(res => res.json()).subscribe(res => {this.token = res});

我不确定http API如何处理空的url编码体，因此选择了将空对象字符串化的最安全选项 - 但是肯定可以整理一下！希望有所帮助！

- librsean

Answer 3

你的HTTP POST调用中缺少body参数。

// Http post function declaration
post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response>

https://angular.io/docs/ts/latest/api/http/Http-class.html

- TheKojuEffect

---

我不发送任何东西。我只想获取令牌。 - vikram mistry

嘿兄弟，我在请求的主体中放了一个空值，但仍然会创建Laravel的会话文件。 - vikram mistry