Cors 正在阻止客户端访问本地 vertx-server
Cors is blocking client access to local vertx-server
我 运行 遇到了麻烦,CORS 在通过 jquery 获取 JSON 对象时阻止我的客户端访问 vertx 服务器。我发现 作为解决方案,但我似乎在我的实施中做错了什么。
我正在测试的是 get-invokation,但我认为同样的问题适用于所有 api。
@Override
public void start() {
Router router = Router.router(vertx);
router.route().handler(CorsHandler.create(".*.")
.allowedMethod(io.vertx.core.http.HttpMethod.GET)
.allowedMethod(io.vertx.core.http.HttpMethod.POST)
.allowedMethod(io.vertx.core.http.HttpMethod.OPTIONS)
.allowedHeader("Access-Control-Request-Method")
.allowedHeader("Access-Control-Allow-Credentials")
.allowedHeader("Access-Control-Allow-Origin")
.allowedHeader("Access-Control-Allow-Headers")
.allowedHeader("Content-Type"));
router.route("/api/diagrams*").handler(BodyHandler.create());
router.post("/api/diagrams").handler(this::insert);
router.delete("/api/diagrams/delete/:id").handler(this::delete);
router.get("/api/diagrams/get/:id").handler(this::get);
router.get("/api/diagrams/get/user/:username").handler(this::getByUser);
vertx.createHttpServer()
.requestHandler(router::accept)
.listen(7070);
}
private void get(RoutingContext rc) {
final String id = rc.request().getParam("id");
if (id == null) {
rc.response().setStatusCode(400).end();
} else {
UserDiagram diagram = userDiagramDao.get(id);
if (diagram == null) {
rc.response().setStatusCode(404).end();
} else {
rc.response()
.putHeader("content-type", "application/json; charset=utf-8")
// Are these necessary?
.putHeader("Access-Control-Allow-Origin", "*")
.putHeader("Access-Control-Allow-Methods", "POST, GET")
.putHeader("Custom-Header", "Own-Data")
.putHeader("Access-Control-Expose-Headers", "Custom-Header")
//
.end(Json.encodePrettily(diagram));
}
}
}
从 f12 看到的 Cors 错误:
jquery.min.js:4 Access to XMLHttpRequest at
'localhost:7070/api/diagrams/get/5db07cfd5e189c7a093bf920' from origin
'http://localhost:8080' has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https. send @ jquery.min.js:4 ajax @ jquery.min.js:4
(anonymous) @ chart.xhtml:21 chart.xhtml:12 Cross-Origin Read Blocking
(CORB) blocked cross-origin response
http://registry.npmjs.org/node-fetch with MIME type application/json.
See https://www.chromestatus.com/feature/5629709824032768 for more
details. jquery.min.js:4 [Violation] 'error' handler took 1376ms
查询从客户端测试如下:
var result_data;
$.ajax({
url: "localhost:7070/api/diagrams/get/5db07cfd5e189c7a093bf920",
type: "GET",
//contentType: "application/json",
// dataType: 'json',
data: diagram_data,
success: function(res) {
result_data = res;
alert("Success!!");
},
error: function(xhr, textStatus, errorThrown) {
alert("Query failed");
}
});
我也不清楚问题出在客户端还是服务器端。
尝试将 http://
放入请求 url 中。
如错误所述,请求仅支持 http、https 等协议...
我 运行 遇到了麻烦,CORS 在通过 jquery 获取 JSON 对象时阻止我的客户端访问 vertx 服务器。我发现
我正在测试的是 get-invokation,但我认为同样的问题适用于所有 api。
@Override
public void start() {
Router router = Router.router(vertx);
router.route().handler(CorsHandler.create(".*.")
.allowedMethod(io.vertx.core.http.HttpMethod.GET)
.allowedMethod(io.vertx.core.http.HttpMethod.POST)
.allowedMethod(io.vertx.core.http.HttpMethod.OPTIONS)
.allowedHeader("Access-Control-Request-Method")
.allowedHeader("Access-Control-Allow-Credentials")
.allowedHeader("Access-Control-Allow-Origin")
.allowedHeader("Access-Control-Allow-Headers")
.allowedHeader("Content-Type"));
router.route("/api/diagrams*").handler(BodyHandler.create());
router.post("/api/diagrams").handler(this::insert);
router.delete("/api/diagrams/delete/:id").handler(this::delete);
router.get("/api/diagrams/get/:id").handler(this::get);
router.get("/api/diagrams/get/user/:username").handler(this::getByUser);
vertx.createHttpServer()
.requestHandler(router::accept)
.listen(7070);
}
private void get(RoutingContext rc) {
final String id = rc.request().getParam("id");
if (id == null) {
rc.response().setStatusCode(400).end();
} else {
UserDiagram diagram = userDiagramDao.get(id);
if (diagram == null) {
rc.response().setStatusCode(404).end();
} else {
rc.response()
.putHeader("content-type", "application/json; charset=utf-8")
// Are these necessary?
.putHeader("Access-Control-Allow-Origin", "*")
.putHeader("Access-Control-Allow-Methods", "POST, GET")
.putHeader("Custom-Header", "Own-Data")
.putHeader("Access-Control-Expose-Headers", "Custom-Header")
//
.end(Json.encodePrettily(diagram));
}
}
}
从 f12 看到的 Cors 错误:
jquery.min.js:4 Access to XMLHttpRequest at 'localhost:7070/api/diagrams/get/5db07cfd5e189c7a093bf920' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ chart.xhtml:21 chart.xhtml:12 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://registry.npmjs.org/node-fetch with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. jquery.min.js:4 [Violation] 'error' handler took 1376ms
查询从客户端测试如下:
var result_data;
$.ajax({
url: "localhost:7070/api/diagrams/get/5db07cfd5e189c7a093bf920",
type: "GET",
//contentType: "application/json",
// dataType: 'json',
data: diagram_data,
success: function(res) {
result_data = res;
alert("Success!!");
},
error: function(xhr, textStatus, errorThrown) {
alert("Query failed");
}
});
我也不清楚问题出在客户端还是服务器端。
尝试将 http://
放入请求 url 中。
如错误所述,请求仅支持 http、https 等协议...