CORS issue while downloading Image

Question

I have an API which converts base64 string to image and write the image in Tomcat Server.The image writes successfully after calling API but gives the error while retrieving the same image follows:

"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. XMLHttpRequest cannot load http://hostname:4444//tmpFiles/31487660124865.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource.

My code is as follows:

public Message uploadImage(Map<String, String> map) {

    // Initializing the message
    Message message = new Message();

    try {

        // Get the file data
        String fileData = map.get("file_data");

        // Split the data with the comma
        String base64Image = fileData.split(",")[1];

        // Convert the base64 input to binary
        byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);

        BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));

        // Manipulations in File Name
        String fileName = map.get("file_name");
        String file = fileName.substring(0, fileName.indexOf("."));
        String fileExtension = fileName.substring(fileName.indexOf("."));

        // Get the current time
        Long time = new Date().getTime();

        // Write the file name with the current time to avoid redundancy
        String maniputedFileName = file + "" + time + fileExtension;
        System.out.println("manipulated file name is " + maniputedFileName);

        // Check if file name is not empty
        if (!maniputedFileName.isEmpty()) {

            // Get the root path of tomcat server
            String rootPath = System.getProperty("catalina.home");

            System.out.println("root Path:- " + rootPath);

            // File Directory/Path on tomcat server
            File fileDirectory = new File(rootPath + File.separator + "webapps/tmpFiles");

            // If file direcory does not exist
            if (!fileDirectory.exists())
                fileDirectory.mkdirs();

            File outputfile = new File(fileDirectory.getAbsolutePath() + File.separator + maniputedFileName);

            // Write created image on server
            ImageIO.write(image, "png", outputfile);

            // Set the success message
            message.setDescription("You successfully uploaded file=" + maniputedFileName);
            message.setObject(outputfile.getAbsolutePath());
            message.setValid(true);
            return message;

        }
        // Set the failure message
        else {
            message.setDescription("You failed to upload " + maniputedFileName + " because the file was empty.");
            message.setValid(false);
            return message;
        }
    }
    // Handling all exceptions
    catch (IOException e) {
        message.setDescription(e.getMessage());
        message.setValid(false);
        return message;
    }
}

And web.xml is:

     <filter>
        <filter-name>tokenfilter</filter-name>
        <filter-class>com.springiot.filter.TokenFilter</filter-class>
    </filter>
    <filter-mapping>
    <filter-name>tokenfilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
    <filter-name>SimpleCORSFilter</filter-name>
    <filter-class>com.springiot.filter.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>SimpleCORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

And my tokenFilter Class is :

 HttpServletResponse response = (HttpServletResponse) res;

    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "POST, GET,OPTIONS, DELETE");
    response.addHeader("Access-Control-Max-Age", "3600");
    response.addHeader("Access-Control-Allow-Headers",
            "Content-Type, Access-Control-Allow-Headers, Authorization,X-Requested-With,token,userKey,user_id");

Answer 1

You need to add the filter in web.xml in CATALINA_HOME/conf with proper path name or just /*. Add filter like below

  ...

 <filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 </filter>
 <filter-mapping>
   <filter-name>CorsFilter</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>

...

For more info check this official document

Answer 2

There are some rules to follow:

1. If you make a request XMLHttpRequest to a different domain, then this issue will arise.
2. Browser always allows same origin, not others for security policy. If browser finds any request to different, then it will block you.

This question [How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems] is answered here: https://stackoverflow.com/a/43881141/2293534

CORS Security - Universal Allow

1. Setting the 'Access-Control-Allow-Origin' header to *
2. Effectively turns the content into a public resource, allowing access from any domain.

Scenarios:

1. An attacker can steal data from an intranet site that has set this header to * by enticing a user to visit an attacker controlled site on the Internet.
2. An attacker can perform attacks on other remote apps via a victim’s browser when the victim navigates to an attacker controlled site.

I have given an answer here: Is this CORS handler safe? You can check about CORS here. It will clarify your more.

Resource Link:

1. Cross-Origin XMLHttpRequest
2. Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

Answer 3

If you have access to the pipelines in tomcat server, you can try to serve the API in HTTPS, then the CORS would not be happen.

OR

you can disable cors in tomcat server which i do not recommend

Answer 4

CORS problems? Use a proxy and follow the rules. By altering your header, you are removing security that was put in place to avoid a particular type of attack. That's a bad idea if you are doing anything that needs to be secure.

At a proxy you can intercept the request and alter anything in the header you need to and rewrite the response header as well if needed without incurring risk.

From your error message "http://:4444//tmpFiles/31487660124865.jpg" there is obviously something wrong with the url. Please post the code for the request.

@SkyWalker is correct with his answer. I suspect once you supply us with the rest of the code it will be obvious that the domain or protocol and domain are changing. If that is the case and you dont want make yourself vulnerable, simply run it through a proxy terminating the valid ssl cert at the proxy. (not implying that you shouldnt secure the traffic to the upstream)

Nginx works well for these sort of task. But pick your proxy.. There's a ton of them out there.

Answer 5

If making an XMLHttpRequest causes problems then don't use it, instead consider just fetching the data (using HttpURLConnection) into a local bytearray. Now decode (display) the image as loaded from a local variable (eg: a bytes array) to avoid CORS.

Also I am used to a URL like : http://host:port/address/ but yours is witten as http://:port// so I don't understand how you can access a web (http) server by using a port only and without server address. That should cause URL error, but you must be reaching the file destination somehow, since CORS happens to protect the media...

The below code might be worth trying in a blank/new testing project :

(PS: No testable link provided like http://server:port/tmpFiles/image.jpg, so using as shown)

Image image = null;

try 
{
    URL url = new URL("http://:4444//tmpFiles/31487660124865.jpg");
    image = ImageIO.read(url);
} 
catch (IOException e) { e.printStackTrace(); }

JFrame frame = new JFrame("StackOverflow test");
JLabel label = new JLabel(new ImageIcon(image));
frame.setSize(500, 500); 
frame.add(label); frame.setVisible(true);

And the related imports :

import javax.swing.ImageIcon;
import javax.swing.JFrame;          import javax.swing.JLabel;
import java.awt.Image;              import javax.imageio.ImageIO;
import java.net.HttpURLConnection;  import java.net.URL;