問題描述
我正在使用 imgur api 上傳圖片 通過一個節(jié)點 js 應(yīng)用程序.
I am using the imgur api to upload images via a node js app.
我正在將圖像轉(zhuǎn)換為 base64 字符串并通過 Postman 發(fā)送它們效果很好.
I am converting images to base64 strings and sending them via Postman works great.
我使用 node-fetch 進行 api 調(diào)用.
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 在預(yù)檢響應(yīng)中不允許使用標頭.
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..
我認為它一定是我缺少的一些簡單的東西.我已經(jīng)堅持了幾個小時，請幫助我.
I assume it must be something simple that I am missing. I have been stuck on this for hours please help me.
推薦答案
瀏覽器限制 HTTP 請求與你的網(wǎng)頁在同一個域，所以你將無法直接從瀏覽器訪問 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.
我正在將圖像轉(zhuǎn)換為 base64 字符串并通過 Postman 發(fā)送它們效果很好.
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..
這些標頭必須由服務(wù)器作為響應(yīng)返回 - 在您的情況下由 imgur 服務(wù)器返回.你不能在瀏覽器的請求中設(shè)置它們，所以它永遠不會起作用.
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 不允許預(yù)檢響應(yīng)中的 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:
如果您可以訪問后端 api，您可以在服務(wù)器上設(shè)置Access-Control-Allow-Origin"標頭并讓您的應(yīng)用訪問該 api - 但因為您無法訪問 imgur服務(wù)器 - 你可能做不到.
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.這種解決方法應(yīng)該適合開發(fā).該插件將禁用您的 CORS 設(shè)置，您將能夠點擊 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 設(shè)置小型節(jié)點服務(wù)器.然后，您將訪問您自己的節(jié)點服務(wù)器，該節(jié)點服務(wù)器又將訪問 imgur api.由于節(jié)點服務(wù)器不是瀏覽器環(huán)境，它不會有任何 CORS 問題，您將能夠以這種方式訪問?? imgur API.這也是您能夠毫無問題地從 Postman 訪問 API 的原因.由于 Postman 不是瀏覽器環(huán)境，因此不受 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.
這篇關(guān)于發(fā)布到外部 API 會引發(fā) CORS，但它適用于 Postman的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！