发布到外部 API 会引发 CORS，但它适用于 Postman

POSTing to external API throws CORS but it works from Postman(发布到外部 API 会引发 CORS，但它适用于 Postman)

问题描述

我正在使用 imgur api 上传图片 通过一个节点 js 应用程序.

I am using the imgur api to upload images via a node js app.

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

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

我使用 node-fetch 进行 api 调用.

I use node-fetch to make api calls.

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-Access-Control-Allow-Headers 在预检响应中不允许使用标头.

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.

我尝试了许多Access-Control-Allow-xxx"标头，但没有一个有效..

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

我认为它一定是我缺少的一些简单的东西.我已经坚持了几个小时，请帮助我.

I assume it must be something simple that I am missing. I have been stuck on this for hours please help me.

推荐答案

浏览器限制 HTTP 请求与你的网页在同一个域，所以你将无法直接从浏览器访问 imgur api 而不会遇到CORS 问题.

Browser restricts HTTP requests to be at the same domain as your web page, so you won't be able to hit imgur api directly from the browser without running into CORS issue.

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

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

那是因为 Postman 不是浏览器，所以不受 CORS 政策的限制.

That's because Postman is not a browser, so is not limited by CORS policy.

我尝试了许多Access-Control-Allow-xxx"标头，但没有一个工作..

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

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

These headers must be returned by the server in response - in your case by the imgur server. You can't set them in the request from browser, so it'll never work.

错误:访问 'https://api.imgur.com/3/image' 来自原点'http://localhost:3000' 已被 CORS 策略阻止:请求标头字段 Access-Control-Allow-Headers 不允许预检响应中的 Access-Control-Allow-Headers.

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.

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

Possible solutions to your problem:

1. 如果您可以访问后端 api，您可以在服务器上设置Access-Control-Allow-Origin"标头并让您的应用访问该 api - 但因为您无法访问 imgur服务器 - 你可能做不到.

1. If you have access to the backend api you can set the "Access-Control-Allow-Origin" header on the server and let your app access the api - but as you won't have access to the imgur server - you probably can't do that.

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

Disable CORS in the browser - you can use a plugin like: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en. This workaound should be fine for development. The plugin will disable your CORS settings and you will be able to hit imgur apis.

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

The third solution is using a proxy. You can setup a small node server using express. You will then hit your own node server, which in turn will hit the imgur api. As node server is not a browser environment, it won't have any CORS issue and you will be able to access imgur API that way. This is also the reason you were able to hit the API from Postman without any issues. As Postman is not a browser environment, it's not limited by CORS policy.

这篇关于发布到外部 API 会引发 CORS，但它适用于 Postman的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！