Chrome CORS阻止Blob POST请求：跨域图片上传问题求助

这个问题我之前碰到过，核心问题出在blob URL的格式错误，再结合CORS配置的细节调整就能解决，一步步来：

1. 先解决最直接的错误：Blob URL格式问题 #

你看到的报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https，本质是浏览器识别不了你的请求协议——看你提供的图片URL：blob: http://localhost:8081/e6f58adc-6a76-40b1-a0d4-09acdda624，这里blob:和http之间多了个空格！

这个空格会让浏览器把整个URL当成无效协议处理，和CORS本身无关，但会先触发这个错误。解决办法：

• 检查前端代码中生成/传递Blob URL的逻辑，确保blob:和后续地址之间没有空格，正确格式应该是blob:http://localhost:8081/e6f58adc-6a76-40b1-a0d4-09acdda624
• 如果是Froala内部处理导致的空格，建议用自定义上传适配器替代默认逻辑，避免这个格式问题（后面会给代码示例）

2. 确保服务器端CORS配置正确 #

当Blob URL格式修复后，需要保证8082端口的服务器正确配置CORS，允许8081端口的请求：
以Node.js/Express为例，配置如下：

const express = require('express');
const cors = require('cors');
const app = express();

// 精准配置允许的源，不要用*（如果需要带凭证的话）
const corsOptions = {
  origin: 'http://localhost:8081',
  credentials: true, // 如果需要携带Cookie等凭证，必须设为true
  allowedHeaders: ['Content-Type', 'X-Requested-With'],
  methods: ['POST', 'OPTIONS'] // 上传用POST，OPTIONS是预检请求
};

app.use(cors(corsOptions));

// 处理图片上传的路由（这里只是示例，实际要加文件处理逻辑）
app.post('/image_upload', (req, res) => {
  // 比如用multer处理文件上传，保存到服务器目录
  // 然后返回图片的访问URL
  res.json({ url: 'http://localhost:8082/uploads/your-image-file.jpg' });
});

app.listen(8082, () => {
  console.log('Upload server running on port 8082');
});

3. 调整Froala的上传配置 #

在前端Froala初始化时，要开启凭证携带（如果服务器配置了credentials: true），同时可以自定义上传逻辑避免Blob URL问题：

$('.your-froala-editor').froalaEditor({
  imageUploadURL: 'http://localhost:8082/image_upload',
  imageUploadWithCredentials: true, // 和服务器的credentials配置对应
  events: {
    // 拦截默认上传逻辑，手动处理文件上传
    'image.beforeUpload': function(files) {
      const formData = new FormData();
      formData.append('image', files[0]); // 把文件加到FormData里

      // 用原生AJAX或jQuery上传
      $.ajax({
        url: this.opts.imageUploadURL,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhrFields: {
          withCredentials: this.opts.imageUploadWithCredentials
        },
        success: (response) => {
          // 上传成功后，把服务器返回的图片URL插入编辑器
          this.image.insert(response.url);
        },
        error: (err) => {
          console.error('图片上传失败:', err);
        }
      });

      // 返回false阻止Froala默认的上传流程
      return false;
    }
  }
});

最后验证步骤 #

1. 先确认Blob URL没有空格，用console.log打印上传前的URL检查格式
2. 测试服务器的CORS配置：用Postman发送OPTIONS请求到http://localhost:8082/image_upload，看响应头里有没有Access-Control-Allow-Origin: http://localhost:8081
3. 再测试前端拖拽上传，看是否能正常发送请求并返回图片URL

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