即使启用了 CORS，API Gate away 也会被阻止答案

【问题标题】：API Gate away Is Blocked even when CORS is enabled即使启用了 CORS，API Gate away 也会被阻止
【发布时间】：2021-03-29 14:06:35
【问题描述】：

我正在尝试制作一个 api 来像这样将图像上传到 cloudinary

    fd.append('photos', file);
    fd.append('upload_preset', 
         CLOUDINARY_UPLOAD_PRESET);

    axios({
        url: CLOUDINARY_API,
        method: 'POST',
        headers: {

            'Content-Type': 'application/x-www-form-urlencoded',
            "Access-Control-Allow-Origin": "*",
            'Access-Control-Allow-Headers': 'Origin',
            'Access-Control-Allow-Credentials': true
        },
        data: fd
    }).then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.error(err);
    })

})

但我从浏览器收到此错误

CORS 策略已阻止从源“http://127.0.0.1:3000”访问“https://api.cloudinary.com/v1_1/******/mh/upload”处的 XMLHttpRequest ：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。Blockquote

【问题讨论】：

标签： axios upload cors cloudinary

【解决方案1】：

您需要从您发送的请求中删除三个“Access-Control-Allow-*”标头。

Cloudinary 允许跨域请求的标头不包括您发送的那些标头，因此浏览器会抛出此错误。

以下是允许跨域上传的标头（Access-Control-Allow-Headers 下）：

curl -sD - -X OPTIONS https://api.cloudinary.com/v1_1/demo/image/upload

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Cache-Control, Content-Disposition, Content-MD5, Content-Range, Content-Type, DPR, Viewport-Width, X-CSRF-Token, X-Prototype-Version, X-Requested-With, X-Unique-Upload-Id
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS
Access-Control-Max-Age: 1728000
Cache-Control: no-cache
Content-Type: text/plain; charset=utf-8
Date: Sat, 19 Dec 2020 09:49:48 GMT
Server: cloudinary
Status: 200 OK
Vary: Accept-Encoding
X-Request-Id: d1af2a2f8a986d9ebbd1f14399dd409d
X-UA-Compatible: IE=Edge,chrome=1
X-XSS-Protection: 1; mode=block
Content-Length: 0
Connection: keep-alive

编辑：此外，Cloudinary API 没有名为“照片”的参数。要上传的文件在“file”参数中发送。因此，您需要将fd.append('photos', file); 替换为fd.append('file', file);。

【讨论】：