call api cors domain

Question

i have a problem with cors. I would like to call an endpoint which is on another domain1 (can't change to https) from a other domain2.

Is it possible ?

I have this error :

> Access to XMLHttpRequest at
> 'http://192.168.1.140:8090/app1/auth/login' from origin 'http://app2'
> 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

App1 : vuejs with axios

axios
.post('/auth/login', {
    username: username,
    password: password
})

App2 : java with jersey

Updated 19/03 15:40:

    @OPTIONS
@Path("/login")
public Response login() {
        return Response.status(200).header("Access-Control-Allow-Origin", "*")
                  .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
                  .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
                  .build();
}


@POST
@Consumes("application/x-www-form-urlencoded")
@Produces("application/json")
@Path("/login")
public Response login(@FormParam("username") String username, @FormParam("password") String password) {
    return Response
        .status(200)
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
        .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
        .build();
}

Updated 19/03 16:08

I deleted two lines in vuejs

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.token;

Now it's work But how can i call an http endpoint from https?

Thank you

You need to have code for handling OPTIONS requests, not just POST. That’s because the error message cited in the question indicates the browser is making a CORS preflight OPTIONS request before trying the POST request in your frontend code. But the preflight fails, because the response the browser receives for the preflight OPTIONS request doesn’t include the Access-Control-Allow-Origin response header. So the browser stops right there and never moves on to trying the POST request. See the answer at https://stackoverflow.com/a/28067653/441757 — sideshowbarker, Mar 19 '20 at 14:31
Thank you for your help. I updated the post. It still doesn't work. — jeyGey, Mar 19 '20 at 14:42

score 0 · Answer 1 · answered Mar 19 '20 at 14:54

Take a look at the Network tab in your browser (Control-Shift-J > Network in Chrome). The first thing you see is probably a request to your login URL.

However, if you look at the method, it is an OPTIONS request, not a POST request. I'm guessing it returns a 404 or 405 error, neither of which have the CORS headers that you added previously.

You need to add an OPTIONS method to your resource. Something like this:

@OPTIONS // options rather than post
@Path("/login")
public Response loginOptions() { // no parameters here
    return Response
        .status(200)
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE")
        .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
        .build();
}

Some people simplify this by adding a Filter, which is a single class that returns this response for any OPTIONS call made to your code.

thank you for your answer. i have solved my problem. window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.token; I have removed two lines. But now how can i call an http endpoint from https? — jeyGey, Mar 19 '20 at 15:06

call api cors domain

1 Answers1