发布到外部API会抛出CORS，但它可以从邮递员那里工作

Question

我正在使用imgurapi通过nodejs应用程序上传图像。

我正在将图像转换为bas64字符串，并通过邮递员发送它们。

我使用node-finch进行api调用。

const fetch = require('node-fetch')
...
async uploadImage(base64image) {
        try {
            const url = 'https://api.imgur.com/3/image'
            const res = await fetch(url,
                {
                    method: 'POST',
                    body: { image: base64image },
                    headers: {
                        'content-type': 'application/json',
                        'Authorization': 'Client-ID [my-client-id]',
                        'Access-Control-Allow-Headers': 'Content-Type, Authorization, Access-Control-Allow-Headers',
                        'Access-Control-Allow-Methods': 'POST',
                    }
                }
            )

            console.log(res)
        } catch(err) {
            console.log(err)
        }
    }

错误：在“”处获取的访问权限https://api.imgur.com/3/image“起源”http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许标头。

我尝试了许多访问控制允许xxx头，但没有一个工作。.

我想一定是我错过了一些简单的东西。我已经被困在这几个小时了，请帮帮我。

Answer 1

我在自己的应用程序中有一些观察结果帮助我解决了这个问题。我有一个节点应用程序作为后端api服务和一个VueJS构建的前端。我使用cors设置我的节点应用程序，cors包含允许访问我的节点应用程序的endpoint列表。在我的本地机器上工作不会给我任何错误，直到我上传到我的服务器。

这里是我的环境本地环境

• Nodejs:12.16.1

生产环境

• Nodejs:12.19.0

以下是我根据自己制作的应用程序进行的观察。

1. 当我上传一个表单的图像[500kb及以上][发布或放置]，cors错误出现，但小于这个，一切都很好。
2. 如果我使用表单数据向服务器发送数据，我在我的网络选项卡中看到两个请求，选项和实际请求。
3. 实际的请求失败了，但我看到我的内容长度非常高，这使我得出结论，我的请求被拒绝，因为客户端发送的大量数据，我的服务器可能有限。我知道这可能会误导人，但我所做的解决方案是有效的，所以我不知道为什么cors问题会出现，尽管数据限制是问题所在。

我的解决方案：在我的nginx配置文件中，我增加了我的client_max_body_size到100M。我相信nginx的默认值是1MB

1. 在其中打开/etc/nginx/sites-可用/you-server-file，其中you-server-file可以像www.example.com或默认。
2. 在服务器块内添加以下行。您可以将其设置为除100M之外的任何金额。

server {
    client_max_body_size 100M;
    ...
}

Answer 2

这是因为访问控制允许标头，访问控制允许方法是服务器使用的标头。服务器通过中间件附加标头。

现在，假设在启用CORS的服务器（在下面的示例中为express服务器）中设置了此类（默认）头：

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept');
});

您正在从客户端发送accesscontrolallow头文件，服务器将其视为未列入白名单的头文件。

所以，在标题中只使用这些：

headers: {
    'content-type': 'application/json',
    'Authorization': 'Client-ID [my-client-id]'
}

它应该很好用。

顺便说一句，我认为它与邮递员合作是因为：

• 如果不安装小邮递员捕获扩展，邮递员无法设置某些标题。
• 浏览器安全性停止跨源请求。如果您禁用chrome安全性，它将执行任何CORS请求。

此外，根据这一点：

我相信这可能是因为Chrome不支持localhost通过accesscontrolalloworigin——请参阅Chrome问题

要让Chrome在标题中发送Access-Control-允许-起源，只需将 /etc/hosts文件中的localhost别名发送到其他域，例如：

127.0.0.1   localhost yourdomain.com

然后，如果您使用yourdomain.com而不是localhost访问脚本，则调用应该会成功。

注意：我不认为内容类型应该是application/json，它应该是image/jpeg之类的。或者，如果标题不起作用，也可能不包含标题。

Answer 3

浏览器限制HTTP请求与您的网页位于同一个域，因此您无法直接从浏览器访问imgur api而不会遇到CORS问题。

我正在将图像转换为bas64字符串，并通过邮递员发送它们。

这是因为邮递员不是浏览器，所以不受CORS政策的限制。

我尝试了许多访问控制允许xxx头，但没有一个工作。.

这些头文件必须由服务器返回作为响应—在您的情况下是由imgur服务器返回的。您无法在“来自浏览器的请求”中设置它们，因此它将永远无法工作。

错误：在“”处获取的访问权限https://api.imgur.com/3/image“起源”http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许标头。

您的问题的可能解决方案：

>

如果你可以访问后端api，你可以在服务器上设置“访问-控制-允许-起源”头，让你的应用程序访问api——但是因为你不能访问imgur服务器——你可能不能这样做那个。

在浏览器中禁用CORS——你可以使用这样的插件：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en.这个工作站应该适合开发。该插件将禁用您的CORS设置，您将能够命中imgur apis。

第三种解决方案是使用代理。您可以使用express设置小型节点服务器。然后，您将访问自己的节点服务器，而节点服务器又将访问imgurapi。由于节点服务器不是一个浏览器环境，它不会有任何CORS问题，您可以通过这种方式访问imgur API。这也是为什么您能够从Postman无任何问题地访问API的原因。由于Postman不是一个浏览器环境，因此它不受CORS策略的限制。