尝试从 API 获取信息时出现 CORS 策略错误 [重复]

Question

我正在尝试从 DHL API 获取信息，但它一直被 cors 政策阻止。

我在后端服务器中设置了 cors 策略，但它仍然导致错误

我做错了什么？

这是我得到的错误："Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response."

后端：

app.use(cors({
    origin:["http://localhost:3000"],
    method:["GET","POST","OPTIONS","PUT"],
    credentials: true,
    
}));


    app.get("https://api-eu.dhl.com/track/shipments", (req,res) => {
        res.send({msg:ok})
    })

前端：

const trackBtn = () => { 

  
        fetch(`https://api-eu.dhl.com/track/shipments`, {
            method: 'GET',
            params: {trackingNumber: '423432432'},
            headers: {
                'Accept': 'multipart/form-data',
                'DHL-API-Key': 'apF7cO8oD2hN7v',
                'Content-Type' : 'multipart/form-data charset=UTF-8',
                'Access-Control-Allow-Credentials':'*',
                "Access-Control-Allow-Methods":"DELETE, POST, GET, OPTIONS",
                "Access-Control-Allow-Headers":"Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
            },
        
            
        }).then(res => {
            console.log(res.data);
        })
        .catch(err => {
            console.log(err);
        });
    }

Answer 1

从您的请求中删除 Access-Control-Allow-* 标头。它们属于响应，即由服务器添加。您不得将它们包含在请求中。

您还必须在 CORS 启用中允许非标准标头 DHL-API-Key：

app.use(cors({
  origin:["http://localhost:3000"],
  method:["GET","POST","OPTIONS","PUT"],
  credentials: true,
  allowedHeaders: ["DHL-API-Key"]
}));

最后，params 不是fetch 的允许选项，也许你的意思是

fetch(`https://api-eu.dhl.com/track/shipments?trackingNumber=423432432`, ...)