javascript - 发布到外部 API 会抛出 CORS 但它可以从 Postman 运行

Question

我正在使用 i mgur api to upload images通过 Node js 应用程序。

我正在将图像转换为 base64 字符串并通过 Postman 发送它们效果很好。

我使用 node-fetch 进行 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 策略阻止:预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Headers。

我尝试了很多“Access-Control-Allow-xxx” header ，但没有一个有效..

我想这一定是我遗漏的一些简单的东西。我已经坚持了几个小时，请帮助我。

Answer 1

浏览器将 HTTP 请求限制在与您的网页相同的域中，因此您将无法在不遇到 CORS 问题的情况下直接从浏览器访问 imgur api。

I am converting images to base64 strings and sending them via Postman works great.

那是因为 Postman 不是浏览器，所以不受 CORS 策略限制。

I have tried many 'Access-Control-Allow-xxx' headers but none of them worked..

这些 header 必须由服务器作为响应返回 - 在您的情况下由 imgur 服务器返回。你不能在浏览器的请求中设置它们，所以它永远不会工作。

Error: Access to fetch at 'https://api.imgur.com/3/image' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

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

1. 如果您有权访问后端 api，您可以在服务器上设置“Access-Control-Allow-Origin” header 并让您的应用程序访问该 api - 但因为您无法访问 imgur服务器 - 你可能无法做到这一点。

2. 在浏览器中禁用 CORS - 您可以使用如下插件:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .这个解决方法应该适合开发。该插件将禁用您的 CORS 设置，您将能够访问 imgur api。

3. 第三种解决方案是使用代理。您可以使用 express 设置小型 Node 服务器。然后你将访问你自己的 Node 服务器，它又将访问 imgur api。由于 Node 服务器不是浏览器环境，它不会有任何 CORS 问题，您将能够以这种方式访问​​ imgur API。这也是您能够毫无问题地从 Postman 访问 API 的原因。由于 Postman 不是浏览器环境，因此不受 CORS 策略的限制。