NodeJS+ReactJS项目上传图片到Cloudinary出现strict-origin-when-cross-origin CORS 500错误

首先明确：你的500错误与CORS配置无关，从返回的响应头可见Access-Control-Allow-Origin: *已经正常返回，说明CORS规则已经生效，500是服务端内部处理逻辑出错导致的，可按以下步骤排查：

• 第一步：查看服务端控制台的错误日志
  Express运行时的报错堆栈会完整打印在服务端终端，比前端拿到的错误信息更精准，可直接定位是路由错误、依赖缺失还是Cloudinary调用错误。
• 第二步：修正前端上传参数格式
  上传二进制文件必须使用FormData封装，你当前直接传入fileToUpload的写法不符合文件上传的参数要求，服务端无法正常解析会直接报错，正确写法如下：

  const cloudinaryUpload = (fileToUpload) => {
      const formData = new FormData()
      // append的第一个参数要和服务端接收文件的字段名完全一致，比如服务端用multer.single('image')的话此处填'image'
      formData.append('file', fileToUpload)
      return axios.post(API_URL + '/cloudinary-upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => console.log(res))
      .catch(err => {
          console.log(err)
          console.log("cannot post")
      }); 
  }
  

• 第三步：检查服务端中间件配置
  默认的express.json()、express.urlencoded()中间件无法解析multipart/form-data类型的文件上传请求，你需要额外安装配置文件解析中间件，比如multer或者express-fileupload，示例配置如下：

  // 安装multer后引入
  const multer = require('multer')
  const storage = multer.memoryStorage() // 直接存在内存，不需要存本地服务器
  const upload = multer({ storage: storage })
  // 路由配置要加upload中间件，single参数对应前端FormData里的字段名
  app.post('/cloudinary-upload', upload.single('file'), async (req, res) => {
    // 此处req.file就能拿到上传的文件内容，再调用Cloudinary的上传接口即可
  })
  

• 第四步：核对Cloudinary鉴权参数
  确认你服务端初始化Cloudinary时传入的cloud_name、api_key、api_secret三个参数配置正确，参数错误会导致调用Cloudinary接口直接抛出异常，触发服务端500错误。

之前你将origin修改为http://127.0.0.1:3001后报错，是因为你的客户端实际运行端口为3000，origin值和实际请求来源不匹配导致CORS校验失败，改回*或者http://127.0.0.1:3000即可。

内容的提问来源于stack exchange，提问作者Ho Quang Lam