Cors is blocking client access to local vertx-server

Question

I'm running into trouble with CORS blocking my client from accessing the vertx server when fetching JSON object through jquery. I found CORS issue in vertx Application not working as a solution but I seem to be doing something wrong in my implementation.

The one im testing on is the get-invokation but I assume the same problem is applicable to all of the 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));
        }
    }
}

Cors Error as seen from f12:

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

The query is tested as follows from the client:

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

CORS issue in vertx Application not working

I'm also confused over if the problem is on the client side or server side.

Call the API from a rest client and check the header. – Subir Kumar Sao Oct 23 '19 at 20:48 — Subir Kumar Sao, Oct 23 '19 at 20:48

score 1 · Accepted Answer · answered Oct 23 '19 at 20:48

1

Try to put http:// in the request url.

As the error says that requests are only supported for protocols http, https and so on...

answered Oct 23 '19 at 20:48

elgsantos

1,993
1
5
10

I had tried with http before, but that was before i updated the backend so I didn't think it was something silly like that. – Tiago Redaelli Oct 23 '19 at 21:02

Cors is blocking client access to local vertx-server

1 Answers1