CODEWITHSUNDEEP
javaangularjsmavenjerseycors
yogev levi
yogev levi

Reputation: 377

how to upload file to jersey from angularjs and CORS support

i'm trying to create upload file service. so i was following the guide here for server side . and the guide here for the client side.

but i get that error on the browser

XMLHttpRequest cannot load http://192.168.200.151:8080/documents/uploadDoc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.

and this error on the server
192.168.200.151 - - [03/Nov/2016:13:44:59 +0000] "OPTIONS /documents/uploadDoc HTTP/1.1" 200 13 "http://localhost:8383/mamagoose/admin/index.html" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36" 3 .

i know i have issue of CORS support but i have no idea how to overcome it. i try to edit my pom.xml with this dependency but no luck.

it must be something i'm missing anyone have idea?

<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

client side

  uploadfile : function(action, files, success, error){

        var url = webServiceModuleAddress+"/uploadDoc";

        for ( var i = 0; i < files.length; i++)
        {
            var fd = new FormData();
            fd.append("file", files[i]);

            $http.post(url, fd, {

                withCredentials : false,

                headers : {
                    'Content-Type' : undefined
                    },
                    transformRequest : angular.identity
                   })
                   .success(function(data)
                   {
                    console.log(data);
                   })
                   .error(function(data)
                   {
                    console.log(data);
                   });
       }
    },

server side

@POST
@Path("/uploadDoc")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public String uploadFile(@Context HttpServletRequest req, @QueryParam("callback") String callback,@FormDataParam("file") InputStream fileInputStream,@FormDataParam("file") FormDataContentDisposition contentDispositionHeader) throws JsonProcessingException 
{
    try{
        if(SessionManager.isUserConnected(req))
        {
            String filePath = SERVER_UPLOAD_LOCATION_FOLDER + contentDispositionHeader.getFileName();
            // save the file to the server
            documentsDao.saveFile(fileInputStream, filePath);
            String output = "File saved to server location : " + filePath;
            return ResourceResponse.getResourceJsonString(output, callback, "true", ErrorMessageEnum.SUCCESS);
        }
        else
        {
            return ResourceResponse.getResourceFailResponseString(callback, ErrorMessageEnum.USER_NOT_CONNECTED);
        }

    }catch(Exception e)
    {
        e.printStackTrace();
        return ResourceResponse.getResourceFailResponseString(callback, ErrorMessageEnum.FAILURE);

    }
}

Upvotes: 0

Views: 327

Answers (2)

yogev levi
yogev levi

Reputation: 377

this was a hard problem to solve but i will try to help others in case anyone come across the same problem.

the first thing on server side i added the class in my util package

public class CORSResponseFilter implements ContainerResponseFilter {

    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)throws IOException
    {
        MultivaluedMap<String, Object> headers = responseContext.getHeaders();
        headers.add("Access-Control-Allow-Origin", "http://localhost:8383");//TODO:Need to find a replacement
        headers.add("Access-Control-Allow-Credentials", "true");
        //headers.add("Access-Control-Allow-Origin", "http://podcastpedia.org"); //allows CORS requests only coming from podcastpedia.org       
        headers.add("Access-Control-Allow-Methods", "POST, GET, OPTIONS");          
        headers.add("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    }

}

and then we need to registered the class as a provider

environment.jersey().register(CORSResponseFilter.class);

This configuration has solved a very big problem for me. Because even if I could send the file i would not get the session of the user and cannot validate the request and now everything work fine.

Upvotes: 0

Vikram Palakurthi
Vikram Palakurthi

Reputation: 2506

You get this error if you are trying to access from one domain to another domain. It's a server side issue. You don't need to add any headers in angular for cors. You need to add header on the server side. The server you are making the request to has to implement CORS to grant JavaScript from your website access.

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

Refer to this link on how to implement one - https://www.w3.org/wiki/CORS_Enabled

An example how to implement the CORS, since you are using jersey. http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/

Upvotes: 1

Related Questions