Question

我有一个角度2应用程序，它应该向Node Express后端进行身份验证，它向后端发送登录请求并接收cookie。它应该在每次连续请求时发送此cookie（它没有）。

我的角色应用程序：

类 LoginService

private requestOptions = new RequestOptions({headers: this.headers, withCredentials: true});`


    login(username: string, password: string): Promise<boolean> {
     return this.http.post(this.myUrl + "login",
     JSON.stringify({username:username, password: password}), this.requestOptions)
      .toPromise()
      .then(res => true)
      .catch(this.handleError);
  }

一些 DataService

private requestOptions =  new RequestOptions({headers: this.headers, withCredentials: true})

getData(): Promise<any> {
        return this.http.get(this.myUrl, this.requestOptions)
        .toPromise()
        .then (res => res.json())
        .catch(this.handleError)
    }

在我的节点后端，我有：

response.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
response.header("Access-Control-Allow-Origin", http://localhost:4200);
response.header('Access-Control-Allow-Credentials', true);
response.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');

当我以角度发送登录请求时，我可以看到它已在服务器端被接受，但是当我发送连续请求时，它给了我401未授权，如果您未经过身份验证，这是我发送的错误。

但是，当我通过HttpRequester（用于HTTP请求的Firefox插件）发送登录请求时，我可以访问我的角度应用程序中的所有数据。

我的角度版本是2.4.10

+++ UPDATE +++

所以，我做了一些测试，我发现，只要我使用相同的服务，我的身份验证就可以正常工作。

我有一项名为 login.service.ts 的服务和一项名为 data.service.ts 的服务。

我能做什么： 通过 login.service.ts 登录，并通过 login.service.ts 获取数据。

我不能做的事情 通过 login.service.ts 登录并继续使用 data.service.ts 。

这对我的用例来说不太实用。有人对此有任何想法吗？

Answer 1

默认情况下，angular不发送Cookie。尝试将{ withCredentials: true }传递给您的RequestOptions：

let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http.post(this.connectUrl, <stringified_data> , options);

Answer 2

我有你的情况。用Maciej回答我解决了我的问题。我将{ withCredentials: true }添加到已有标题的请求选项中。

然后是服务器端，在我的快速基础文件server.js上，我添加了

var cors = require("cors");
var corsSettings = {
  origin: true,
  methods: ['POST'],
  credentials: true
};
app.use(cors(corsSettings));

我实际上排除了Access-Control-Allow-Origin:*，因此我唯一的标题（服务器端）是

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, access-control-allow-origin, access-control-allow-headers");
    next();
});

只想指出，正如Maciej所说，你需要一些身体。因此，即使您的查询不需要它，您也需要使用空体字符串调用它。

const jsonHeads = new Headers();
jsonHeads.append('Content-Type', 'application/x-www-form-urlencoded');
jsonHeads.append('Access-Control-Allow-Origin', '*');
jsonHeads.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, access-control-allow-origin');
options = { headers : myHeaders, withCredentials: true }
this.http.post('http://myApi:8080/list', '', options);

这样，angular开始发送cookie并正确验证。我希望这有帮助。我几个小时前就自己需要这个。

Angular 2不会使用CORS

2 个答案: