[英]How to correctly configure server and browser to avoid cors errors? Fetch API + Node.js
我試圖從 index.html 進行一個簡單的 api 調用,但無論我做什么,我都不斷收到錯誤消息。
根據我的理解,cors 錯誤的發生是因為我正在調用不同的服務器,我必須在我的服務器中允許它。
由於我正在進行預檢,我讀到我需要實現 app.option 以使其工作,但這仍然不起作用。
我試過 a) 設置 cors 中間件 b) 使用 npm cors 庫 c) 設置 app.options(),如這里所回答
我知道在使用 Fetch 時,您必須明確選擇您選擇的每個選項,但我似乎錯過了所有選項。
我最終只是在我的服務器中調用了 url,而不是獲取我的服務器 /data 路由,但我希望得到一些幫助以正確配置它以備將來使用。
謝謝!
Access to fetch at 'http://services.runescape.com/m=itemdb_oldschool/api/graph/4151.json' from origin 'http://localhost:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在客戶端使用 //index.html
<script>
fetch('http://services.runescape.com/m=itemdb_oldschool/api/graph/4151.json')
.then(response => response.json())
.then(res => console.log(res))
</script>
//server.js
const express = require('express')
const app = express()
const path = require('path');
const rp = require('request-promise')
const port = 3002
var cors = require('cors')
app.use(cors())
app.options('*', cors());
app.get('/', async (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'));
});
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
編輯:OP 已根據答案更改了問題 - 但無濟於事。
如果您使用 cors 庫,則不必手動設置 CORS 標頭。
var cors = require('cors');
app.options('*', cors()); // Enable preflight by using this middle ware before any other route.
app.use(cors());
如果應為域白名單啟用 CORS,請使用以下選項:
var whitelist = ['http://example1.com', 'http://example2.com'] var corsOptions = { origin: function (origin, callback) { if (whitelist.indexOf(origin) !== -1) { callback(null, true) } else { callback(new Error('Not allowed by CORS')) } } }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.