上传文件时CORS失败

Question

在这里，我的代码遇到了一个小问题。

我的工作

我在后端有一个 laravel 应用程序（在端口 8000 上），我在其中创建了一个 CORS 中间件，允许我从前端（在端口 8080 上）发出跨源请求

这是我的中间件 Cors

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', env("CORS_DOMAINS", 'http://localhost:8080'))
            ->header('Access-Control-Allow-Methods', 'OPTIONS,POST,GET ,PUT, PATCH, DELETE')
            ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-type, Authorization', 'Accept-Language','Content-Disposition', 'Accept');
    }
}

到目前为止，如果我使用 vue-resource 提出简单的请求，一切都会很好。但是当我将 formData 作为数据传递时，CORS 失败了。

我创建了一个用于上传文件的 Javascript 类

在接下来的几行中，只有这一行是我们感兴趣的（它是提出 XHR 请求的人）：

 return this.vm.$http.post(this.options.url, this.data)

我的上传课程

class Upload {
  defaultOptions = {
    extensions: null,
    maxSize: null,
    multiple: false,
    inputName: 'file'
  }
  errors = []
  constructor (files, Vue, options) {
    this.files = files
    this.vm = Vue
    this.options = Object.assign(this.defaultOptions, options)
    this.data = new FormData()
    return this.upload()
  }

  upload () {
    if (!this.files.length) return
    for (let i = 0; i < this.files.length; i++) {
      if (this.checkFile(this.files[i])) {
        this.pushToData(this.files[i])
      } else {
        this.errors.forEach((error) => this.options.errorsCallback(error))
      }
    }
    for (let key in this.options.params) {
      if (this.options.params.hasOwnProperty(key)) { this.data.append(key, this.options.params[key]) }
    }
    return this.vm.$http.post(this.options.url, this.data)
  }
  checkFile (file) {
    return this.checkSize(file) && this.checkExtensions(file)
  }
  checkSize (file) {
    if (this.options.maxSize && file.size > this.options.maxSize) {
      this.errors.push('The file `' + file.name + '` size must not exceed' + this.options.maxSize)
      return false
    }
    return true
  }
  checkExtensions (file) {
    if (this.options.extensions && !this.options.extensions.includes(file.type.split('/')[1])) {
      this.errors.push('The file `' + file.name + '` must have one of theses extensions :' + this.options.extensions.join(','))
      return false
    }
    return true
  }
  pushToData (file) {
    this.data.append(this.options.inputName, file)
  }
}

export default Upload

我想要什么

我希望在我发送 formData 时查询成功

我得到了什么

我收到一条消息，说缺少 Access-Control-Allow-Origin 标头，但我的 Cors 中允许使用此标头。我不明白这个错误。

Answer 1

CORS 不是真正的问题，您的中间件工作正常。直接看上面，你会注意到前面的错误是500 (Internal Server Error)

当您的服务器抛出 500 错误时，Chrome 有时会认为这是一个 CORS 问题。修复 500 错误，CORS 问题就会消失。

Answer 2

在这里聚会迟到了，但只是想将我的回应分享给可能遇到同样情况的其他人。

我有一个 Nginx API 网关，我发现网关上的服务器块中有一个最大正文大小参数，所以这导致了 CORS 错误（每当我上传导致请求的文件时超过这个限制）。

我不确定究竟是什么原因导致错误显示为 CORS 错误，但这是我的来源......希望它也可以帮助其他人！