Cors blocking HTTP delete Method

Question

当我尝试使用HTTP删除方法时，我得到了一个CORS错误。我的前端是Angular-ionic，我的服务器是Java服务器。两人都是白手起家的。

我试图在浏览器中禁用CORS，通过这样做，我管理请求工作和错误消失。虽然这很好，但我的目标是使它每次对每个用户都有效。

这是我的代码与一点背景:

console.log('User Management Service Delete User()');
const myParams = new HttpParams().set('id', this.cookieService.get('AccessToken'));
console.log(myParams);
return this.http.delete(this.endpoint + 'users/delete', { params: myParams});
}

上面的代码是我的前端(客户端)代码。我只是想删除一个用户。

public int serveUserDelete(HTTPServer.Request req, HTTPServer.Response resp) throws IOException {
Map<String, String> params = req.getParams();
String response;
String paramvalue;
String  accessToken;    

resp.getHeaders().add("Content-Type", "application/json");
resp.getHeaders().add("Access-Control-Allow-Origin", "*");
resp.getHeaders().add("Access-Control-Allow-Headers", "*");
resp.getHeaders().add("Access-Control-Allow-Credentials", "true");
resp.getHeaders().add("id", "*");
resp.getHeaders().add("Access-Control-Allow-Methods", "OPTIONS, DELETE, POST, GET, PATCH, PUT");

response = "";
//Id aus dem Parameter auslesen
if (params.containsKey("id")) {
//es gibt einen Parameter id. Suche den Wertd dazu
accessToken = params.get("id");
System.out.println(accessToken);

} else {
accessToken = null;
}
response = um.userDelete(accessToken);
resp.send(200, response);
return 0;
}

上面的代码现在，是我的Java服务器。由于反复试验，添加了报头。

这里是我得到的错误:

Access to XMLHttpRequest at 'http://localhost:8080/umyServerUrl/users/delete?id=u@Yy0NZPLx%266HxYNF%23tv' 
from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

抛出测试(禁用浏览器cors等)，我发现我的服务器上的方法工作得很好。

在这里你可以看到我的"PARAMS"和我的delete请求的Observable打印在控制台中:

HttpParams 
{updates: Array(1), 
cloneFrom: HttpParams, 
encoder: HttpUrlEncodingCodec, 
map: null}
cloneFrom: 
nullencoder: 
HttpUrlEncodingCodec {}[[Prototype]]:
Objectconstructor: class
HttpUrlEncodingCodecdecodeKey: ƒ 
decodeKey(key)decodeValue: ƒ 
decodeValue(value)encodeKey: ƒ 
encodeKey(key)encodeValue: ƒ 
encodeValue(value)[[Prototype]]: 
Objectmap: 
Map(1)[[Entries]]0: {"id" => Array(1)}
key: "id" value: ['hTxYusBwuB7pbUUCkW9E']size: 1[[Prototype]]:
Mapupdates: null[[Prototype]]: 
Object
user-management.service.ts:35 
**Oberservabel:**
Observable {_isScalar: false, source: Observable, 
operator: MapOperator}
operator: MapOperator
project: res => res.body
length: 1
name: ""
arguments: (...)
caller: (...)
[[FunctionLocation]]: http.mjs:1300
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[2]
thisArg: undefined
[[Prototype]]: Object
call: ƒ call(subscriber, source)
constructor: class MapOperator
[[Prototype]]: Object
source: Observable
operator: FilterOperator {thisArg: undefined, predicate: ƒ}
source: Observable {_isScalar: false, source: Observable, operator: MergeMapOperator}
_isScalar: false
[[Prototype]]: Object
_isScalar: false
[[Prototype]]: Object

请帮

Answer 1

访问控制头的组合无效。

resp.getHeaders().add("Content-Type", "application/json");
resp.getHeaders().add("Access-Control-Allow-Origin", "*");
resp.getHeaders().add("Access-Control-Allow-Headers", "*");
resp.getHeaders().add("Access-Control-Allow-Credentials", "true");

不能设置Access-Control-Allow-Origin为*，同时允许设置Access-Control-Allow-Credentials。

对于没有凭据的请求，文本值"*"可以指定为通配符;该值告诉浏览器允许来自任何来源的请求代码访问该资源。尝试将通配符与凭证一起使用将导致错误。

这可能是系统架构的大规模问题。现在你可以像这样测试设置Allow-Originheader:

resp.getHeaders().add("Access-Control-Allow-Origin", "http://localhost:8100");

但是，如果要在任意数量的客户端上工作，则可能需要另一种架构。

CORS是一个安全特性。不要"反复试验";周围具有安全功能!