10

我有两个域（客户端为 example.com，rest API 为 api.example.com），我从客户端向 API 请求考虑 CORS 策略。预检请求按预期工作，除文件上传外，其他所有请求（GET/POST/PUT/DELTE）都运行良好，这意味着 Content-type 是否为“multipart/form-data”。

我在 Chrome 控制台中收到以下错误：

从源“ https://www.example.com ”访问“ https://api.example.com/video/upload ”处的 XMLHttpRequest已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。

这是我的客户（vuejs）来源：

var config = {
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress(e) {
      if (e.lengthComputable) {
        self.percentage = Math.round(e.loaded / e.total * 100) + "%";
      }
    }
  };

  axios
    .post(apiUrl + `/video/upload`, formData, config)
    .then(response => {
      this.successes.push(
        response.data.videoName + " uploaded."
      );
    })
    .catch(e => {
      this.errors.push(message);
    });
},

以及 CORS 的 nginx 配置：

server {
listen 443 ssl default_server http2;
listen [::]:443 ssl default_server ipv6only=on;
root /var/www/example/public;
index       index.php index.html index.htm;
server_name api.example.com:443;

add_header Access-Control-Allow-Origin "*" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS,  DELETE";
add_header Access-Control-Allow-Headers "Content-Type, X-Auth-Token, Origin, Authorization";

谁能告诉我这个代码和配置有什么问题？！感谢任何帮助！

4

2 回答 2

10

我有同样的问题，请求（GET/POST/PUT/DELTE）都可以工作，只有 Content-type:"multipart/form-data" 的文件上传有 CORS 问题。我多次尝试使用标题“Access-Control-Allow-Origin，Access-Control-Allow-Methods，Access-Control-Allow-Headers”。还是不行

最后，我发现 nginx 限制了文件上传大小。因此，我在 nginx conf 文件中添加了“client_max_body_size 10M”。

cors问题解决了。

于 2020-06-12T06:40:26.263 回答
5

通过在应用程序端应用 CORS 解决了这个问题。

详细地说，当浏览器发送预检请求时，会出现错误。因此，对于预检请求，我在应用程序端手动添加了标头。我一直在使用 Laravel 作为后端，所以创建了 Cors 中间件：

public function handle($request, Closure $next) {
    if ($request->getMethod() == "OPTIONS") {   
        $headers = [    
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',    
            'Access-Control-Allow-Headers' => 'Content-Type, Origin, Authorization' 
        ];
        return \Response::make('OK', 200, $headers);    
    }   

    return $next($request);         
}
于 2018-11-05T08:10:34.990 回答