即使启用了 CORS,API Gate 也会被阻止

时间:2020-12-18 23:25:24

标签: axios upload cors cloudinary

我正在尝试制作一个 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);
    })

})

但我从浏览器收到此错误

<块引用>

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

1 个答案:

答案 0 :(得分:0)

您需要从您发送的请求中删除三个“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 没有名为“photos”的参数。要上传的文件在“file”参数中发送。 因此,您需要将 fd.append('photos', file); 替换为 fd.append('file', file);