请求选项 "withCredentials" - Angular2

Question

我在Angular2组件中使用请求连接Neo4j时遇到了CORS问题：

Response to preflight request doesn't pass access control check. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute

我该如何在请求（TypeScript）中设置withCredentials：false？我假设这将解决问题。但是请求ts文件没有在其CoreOptions对象中列出withCredentials。Neo4j-Typescript包的TypeScript定义也没有包含此功能。

- Edan

---

更新：这是Webpack dev-server的一个开放性问题＃431 - 正如@Matteo所建议的那样，服务器没有发送正确的预检响应。 - Edan

更新2：我的问题没有提到我正在使用Webpack-dev服务器中间件。要将 withCredentials 设置为false，您必须将 "Access-Control-Allow-Credentials":"false" 和 noCredentials: true 添加到 devServer 配置选项中。但是，也请参阅 issue #356 获取帮助。 - Edan

Answer 1

你可以通过扩展BrowserXhr类来实现这一点：

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = false;
    return <any>(xhr);
  }
}

并使用扩展的BrowserXhr提供者进行覆盖：

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

- Thierry Templier

---

谢谢，我正在引导级别注入此服务，但仍然遇到CORS错误。显然，当使用带有标题内容类型的POST时，解决方法无效？我非常确定Neo4j-Typescript库设置了内容类型标头。这可能是问题吗？ - Edan

Answer 2

我在我的Angular2应用程序中遇到了同样的问题。 问题在于客户端在每个请求之前都会向服务器发送一个预检请求。

这种请求的类型为OPTIONS，服务器的职责是发送一个带有状态码200和设置接受该客户端请求的标头的预检响应。

这是我的解决方案（使用express）：

// Domain you wish to allow
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'YOUR-CUSTOM-HEADERS-HERE');

// Set to true if you need the website to include cookies in  requests
res.setHeader('Access-Control-Allow-Credentials', true);

// Check if Preflight Request
if (req.method === 'OPTIONS') {
    res.status(200);
    res.end();
}
else {
    // Pass to next layer of middleware
    next();
}

您可以看到，我设置了标题，然后在请求类型为OPTIONS时进行获取。在这种情况下，我发送回状态200并结束响应。

通过这种方式，客户端将被授权，并且您还将能够在所有请求中设置自定义标题，而不必再担心CORS问题。

- Matteo Tosi

---

谢谢Matteo。如果Neo4j数据库服务器没有正确响应预检请求，我应该能在其他论坛等地方找到这个问题。webpack dev-server可能有问题吗？ - Edan

是的，这肯定与服务器未正确处理预检请求有关。您是否有某种中间件监听您的请求？ - Matteo Tosi

是的，我认为Neo4j-Typescript库正在使用Request.js包与Neo4j REST Api通信。这是Webpack dev-server的一个开放问题＃431。 - Edan

我刚刚看了那个问题。你可以尝试在express中使用类似的解决方法（非常相似的行为）。尝试让你的webpack中间件仅向类型为OPTIONS的请求发送回res状态200。如果你测试过了，请告诉我它的表现如何。 - Matteo Tosi

webpack-dev-server是一个Node Express服务器，必须通过选项进行配置--其中没有任何选项允许您实现此处正在实现的应用程序逻辑。我不确定如何使用Webpack做到这一点。 - Edan

Answer 3

如果你真的想改变withCredentials，那么你必须提供定制的BrowserXhr，请参考答案。

- kemsky