Cannot upload photo using ngFlow to URL with cross domain (CORS)

Question

UPDATE 1: Allow cross domain access on server side.
UPDATE 2: Try upload using chrome with security disabled.

I used ngFlow successfully if target is set to URL under the same domain. The problem is that there is firewall setup and the upload is failing randomly due to the image matching certain pattern by the firewall which will block the upload, and the image is not sent to the server. The strange thing is that no error is reported back to the client. The upload just stops.

According to network admin, we need to submit the upload to a different URL which is another domain in order to bypass the firewall. When I set the target to absolute URL for a different domain, I get this error in Chrome when the upload process is executed:

XMLHttpRequest cannot load https://blabla/PhotoUploadCmd?imageOperation=u…tjpg&flowFilename=Desert.jpg&flowRelativePath=Desert.jpg&flowTotalChunks=1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.100.22.111:8282' is therefore not allowed access.

This the the code part which configures ng-flow:

app.config(['flowFactoryProvider', function (flowFactoryProvider) {
  flowFactoryProvider.defaults = {
    target : "/blabla/PhotoUploadCmd?imageOperation=upload",
    //permanentErrors: [404, 500, 501],
    permanentErrors : [ 500, 501 ],
    maxChunkRetries: 1,
    chunkRetryInterval: 5000,
    simultaneousUploads: 4,
    singleFile: true,
    progressCallbacksInterval : 1,
    withCredentials : true,
    method : "octet",
    forceChunkSize : true,
    testChunks: false
  };

  flowFactoryProvider.on('catchAll', function (event) {
    //console.log('catchAll', arguments);
  });
}]);

Mind you that the firewall issue is only happening on UAT machine. If I test the upload on my local Tomcat server, it works fine.

I also tried the following:

• Added the following lines of code on the JSP (which is loaded part of an inner frame), but still the same error No 'Access-Control-Allow-Origin' header is present on the requested resource:

The code:

response.setHeader("Access-Control-Allow-Origin",  request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  

• Tried to open chrome with security disabled:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\path-to-data-folder\Chrome"

Using the above method, upload worked to a different domain, but Chrome displayed the warning You are using unsupported command-line flag.... It goes without saying that this method is not good for production use.

If you have any idea how to solve the firewall issue, or allow ng-flow to perform upload and allow cross-domain access, then please let me know.

Tarek

Answer 1

This is a server side issue... you need to set

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