即使标头是在删除向导应用程序中设置的，CORS 也会失败?

Question

我正在使用dropwizard和angular作为我的UI。我的服务器和 UI 在不同的端口上运行。我的 dropwizard 应用程序似乎没有在响应中设置 Origin 标头。

请求的资源上不存在"访问控制允许源"标头。因此，不允许访问源"http://localhost:4200"。

请您告知可能出现的问题

我已经在直接向导上设置了 CORS，如下所示

@Override
public void run(MyAppConfiguration myAppConfiguration, Environment environment) throws Exception {
//Force browsers to reload all js and html files for every request as angular gets screwed up
environment.servlets()
.addFilter("CacheBustingFilter", new CacheBustingFilter())
.addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "/*");
enableCorsHeaders(environment);
}

private void enableCorsHeaders(Environment env) {
final FilterRegistration.Dynamic cors = env.servlets().addFilter("CORS", CrossOriginFilter.class);
// Configure CORS parameters
corsFilter.setInitParameter("Access-Control-Allow-Credentials", "true");
corsFilter.setInitParameter("Access-Control-Allow-Origin", "*");
corsFilter.setInitParameter("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Headers, Access-Control-Request-Method, Cache-Control, Pragma, Expires");
corsFilter.setInitParameter("Access-Control-Allow-Methods" ", "OPTIONS,GET,PUT,POST,DELETE,HEAD");

// Add URL mapping
cors.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType.class), true, "/*");
}

Angular 服务调用 REST 端点

private reconUrl = "http://localhost:8199/api/iceberg/reconciliations";
getReconciliations(): Promise<Reconciliation[]> {
return this.http.get(this.reconUrl)
.toPromise()
.then(response => response.json().data as Reconciliation[])
.catch(this.handleError);
}

请求-响应标头

http://localhost:8199/api/iceberg/reconciliations

GET http://localhost:8199/api/iceberg/reconciliations
Accept: application/json, text/plain, */*
Origin: http://localhost:4200
X-DevTools-Emulate-Network-Conditions-Client-Id: 90d7ac77-f45f-4d60-a667-a56da9e0582b
X-DevTools-Request-Id: 7836.4077
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Referer: http://localhost:4200/dashboard
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
HTTP/1.1 401 Unauthorized
Date: Thu, 06 Jul 2017 10:59:14 GMT
WWW-Authenticate: BASIC realm="application"
Content-Length: 0

飞行前选项请求/响应

我的浏览器没有执行任何预检请求，因此我没有看到任何选项请求响应。

但是我尝试使用OPTIONS命令进行CURL，如下所示，但仍然看到410未经授权的请求的相同问题

$ curl -H "Origin: http://example.com"        
-H "Access-Control-Request-Method: POST"        
-H "Access-Control-Request-Headers: X-Requested-With"        
-X OPTIONS --verbose http://localhost:8199/api/iceberg/reconciliations

下面的 curl 命令请求-响应

* STATE: INIT => CONNECT handle 0x6000578f0; line 1410 (connection #-5000)
* Added connection 0. The cache now contains 1 members
* STATE: CONNECT => WAITRESOLVE handle 0x6000578f0; line 1446 (connection #0)
*   Trying ::1...
* TCP_NODELAY set
* STATE: WAITRESOLVE => WAITCONNECT handle 0x6000578f0; line 1527 (connection #0)
* Connected to localhost (::1) port 8199 (#0)
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x6000578f0; line 1579 (connection #0)
* Marked for [keep alive]: HTTP default
* STATE: SENDPROTOCONNECT => DO handle 0x6000578f0; line 1597 (connection #0)
> OPTIONS /api/iceberg/reconciliations HTTP/1.1
> Host: localhost:8199
> User-Agent: curl/7.54.1
> Accept: */*
> Origin: http://example.com
> Access-Control-Request-Method: POST
> Access-Control-Request-Headers: X-Requested-With
>
* STATE: DO => DO_DONE handle 0x6000578f0; line 1676 (connection #0)
* STATE: DO_DONE => WAITPERFORM handle 0x6000578f0; line 1801 (connection #0)
* STATE: WAITPERFORM => PERFORM handle 0x6000578f0; line 1811 (connection #0)
* HTTP 1.1 or later with persistent connection, pipelining supported
< HTTP/1.1 401 Unauthorized
< Date: Thu, 06 Jul 2017 10:53:52 GMT
< WWW-Authenticate: BASIC realm="application"
< Content-Length: 0

Answer 1

嘿兄弟，如果您使用的是 Angular CLI，那么首先您必须在项目根目录中创建一个文件。更多信息

https://github.com/angular/angular-cli/blob/cff95a732eaec9c94f41a1476ba9f2524867d11f/docs/documentation/stories/proxy.md

在您的情况下使用此内容

[
{
"context": "/",
"target": "http://localhost:8199",
"secure": false,
"changeOrigin": true
}
]

完成此操作后，您无需在 HTTP 调用中选择端口。您的所有请求都将在 8199 端口下进行。

我忘了运行您需要添加这样的选项。

ng serve --proxy-config proxy-local.conf.json

希望对你有帮助，兄弟。

Answer 2

我在拖放向导 CORS 配置中遇到了类似的问题，在从 Web 应用程序调用的每个 REST API 中，我都遇到了问题"Response to preflight request is not 200"。

最终我发现问题是我为在身份验证中处理而编写的自定义过滤器，因此预检请求被自定义过滤器拦截并返回500错误。

我通过向现有的 cors 参数添加CHAIN_PREFLIGHT_PARAM来处理它，如下所示

cors.setInitParameter(CrossOriginFilter.CHAIN_PREFLIGHT_PARAM, Boolean.FALSE.toString());

Answer 3

请尝试这个

cors.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM, "*");
cors.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER,
"X-Requested-With,Content-Type,Accept,Origin,Authorization");