Vue2-Dropzone自定义GO上传端点遇CORS HeaderDisallowedByPreflightResponse错误求助

针对你遇到的问题，可通过以下Vue2-Dropzone配置调整来解决：

• 清理不必要的请求头：Dropzone默认会添加X-Requested-With这类AJAX头，若后端CORS未允许该头，会触发预检失败。可在配置中通过sending钩子移除或清空这类头：

  options: {
    url: 'https://myendpoint.com:9091/image/product',
    autoProcessQueue: true,
    paramName: 'file',
    maxFilesize: 2,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    // 添加sending钩子处理请求头
    sending: function(file, xhr) {
      // 移除Dropzone自动添加的X-Requested-With头
      xhr.removeRequestHeader('X-Requested-With');
    }
  }
  

• 使用原生表单提交模式：开启sendRaw选项，让Dropzone采用传统的multipart/form-data表单提交，避免额外AJAX头触发预检：

  options: {
    // 其他原有配置...
    sendRaw: true
  }
  

• 显式配置请求头与表单格式：明确指定请求头为multipart/form-data，并开启formData配置，确保提交格式符合后端预期：

  options: {
    // 其他原有配置...
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    formData: true
  }
  

• 预检请求适配：若后端要求严格的预检响应，可在init钩子中进一步规范请求行为：

  options: {
    // 其他原有配置...
    init: function() {
      this.on('sending', function(file, xhr) {
        // 确保只保留后端允许的请求头
        const allowedHeaders = ['Content-Type'];
        // 遍历移除所有非允许的头
        for (let header in xhr._headers) {
          if (!allowedHeaders.includes(header)) {
            xhr.removeRequestHeader(header);
          }
        }
      });
    }
  }
  

另外需注意：Postman不会触发浏览器的预检OPTIONS请求，所以你要确认后端CORS配置已允许：

• OPTIONS请求方法
• 前端实际访问的域名（本地开发如http://localhost:8080，生产环境对应你的域名）
• 所有Dropzone发送的请求头（如上述配置中的Content-Type）

内容的提问来源于stack exchange，提问作者frankfurt