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

如何使用request（Typescript）设置withCredentials: false？我假设这将解决问题。但请求ts文件未在其withCredentials对象中列出CoreOptions。 Neo4j-Typescript包也没有在其Typescript定义中包含它。

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 })
]);

Answer 2

我在Angular2应用程序中遇到了同样的问题。问题是在客户端发出每个请求之前，预检请求被发送到服务器。

此类请求的类型为 OPTIONS ，服务器有责任发回状态为200的预检响应，并设置标头以接受来自该客户端的请求

这是我的解决方案（快递）：

// 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。

Answer 3

如果您确实要更改withCredentials而不是必须提供自定义BrowserXhr，请参阅此answer。

请求选项“withCredentials” - Angular2

3 个答案: