jQuery cross-domain POST (file upload)

Question

I'm making this jquery requisition for file upload:

<script>
    $('#form').submit(function(event) {
        event.preventDefault();
        console.log("Form[0]: \n");
        console.log($('#form')[0]);
        var formData = new FormData($('#form')[0]);
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/PROJECT_URL',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#status').text('Enviando...').attr('style','display: inline;');
            },
            complete: function(response, status) {
                console.log(status);            
                $('#status').text('Arquivo enviado com sucesso!').attr('style','display: inline;');
            }

        });
    });
</script>

I'm able to send the file to the server and the page stays loading while the file is processed in server side. My REST server returns a JSON in the following format: {"status" : "OK", "msg" : "RESPONSE_MESSAGE"}. But, I dont know how to treat this response and always get this error:

XMLHttpRequest cannot load http://localhost:8080/PROJECT_URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I already googled this error and I know this happens because of cross-domain restrictions. What I need to do for overcome this restriction and get the JSON response (I need to get this response to know if file uploaded has the right content)? It's possible to do that?

Thanks!

EDIT:

Server side method for receive file:

@Path("/import")
@Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
@Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
public class ImportResource {

    @POST
    @Path("/mapa")
    @Consumes({MediaType.MULTIPART_FORM_DATA})
    public String uploadMapa(
        @FormDataParam("file") InputStream fileInputStream,
        @FormDataParam("file") FormDataContentDisposition fileDetail,
        @FormDataParam("colaborador") FormDataBodyPart jsonPart) {
    // here the file is processed...

    ....

    // The return is something like this
      return Response.Ok("File is ok");;
    } 
}

Answer 1

Yes this is possible. You need to set the header Access-Control-Allow-Origin: * in your REST service where the response data is being returned form.

Amend your response to be {"status" : "OK", "msg" : "RESPONSE_MESSAGE"} as your current response isn't in correct format.

I take it that your back end is built on Jersey

Response response = Response.status(200).entity(yourEntity).header("Access-Control-Allow-Origin", "*").build();

You can restrict the domain so that it is limited to only one server/client side/domain, to do this please replace the * with the domain you would like to restrict this api to. e.g "www.yourdomain.com".