无法使用 ngFlow 将照片上传到具有跨域 (CORS) 的 URL

Question

更新 1：允许在服务器端进行跨域访问。
更新 2：尝试使用禁用安全性的 chrome 上传。

如果target设置为同域下的URL，我就成功使用了ngFlow。问题是有防火墙设置，上传随机失败是由于防火墙匹配特定模式的图像会阻止上传，并且图像不会发送到服务器。奇怪的是没有错误报告给客户端。上传刚刚停止。

根据网络管理员的说法，我们需要将上传提交到另一个域的不同 URL 以绕过防火墙。当我将 target 设置为不同域的绝对 URL 时，执行上传过程时 Chrome 中出现此错误：

XMLHttpRequest 无法加载 https://blabla/PhotoUploadCmd?imageOperation=u…tjpg&flowFilename=Desert.jpg&flowRelativePath=Desert.jpg&flowTotalChunks=1。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://10.100.22.111:8282' 因此不允许访问。

这是配置 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);
  });
}]);

请注意，防火墙问题仅发生在 UAT 机器上。如果我在本地 Tomcat 服务器上测试上传，它工作正常。

我还尝试了以下方法：

• 在 JSP 上添加了以下代码行（它是加载内部框架的一部分），但仍然出现相同的错误No 'Access-Control-Allow-Origin' header is present on the requested resource：

代码：

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");  

• 尝试在禁用安全性的情况下打开 chrome：

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

使用上述方法，上传到不同的域，但 Chrome 显示警告You are using unsupported command-line flag...。不用说，这种方法不适合生产使用。

如果您知道如何解决防火墙问题，或者允许 ng-flow 执行上传并允许跨域访问，请告诉我。

塔雷克

Answer 1

这是服务器端问题...您需要设置

访问控制允许标题：内容类型 访问控制允许方法：GET、POST、OPTIONS 访问控制允许来源：*