调用DHL API时遇CORS策略拦截，后端已配置CORS仍报错如何解决？

存在的问题 #

• 前端错误添加了Access-Control-*系列响应头字段：这类字段是服务器返回响应时才需要设置的，前端主动加到请求头中会被CORS预检规则拦截，你收到的报错就是因为你在请求头里加了Access-Control-Allow-Methods字段，而服务器没有允许该字段出现在请求头中。
• 跨域逻辑理解错误：你前端直接请求DHL的官方API，跨域限制是DHL的服务器返回的，你在自己的后端服务配置CORS规则完全不生效，只有当前端请求你自己的后端接口时，你配置的CORS才会起作用。
• 后端路由配置错误：Express的路由定义只需要写路径后缀，不能填第三方服务的完整URL，你写的app.get("https://api-eu.dhl.com/track/shipments")是无效配置，根本不会被触发。
• CORS配置字段写错：你配置CORS时用了method字段，正确的字段名是methods，少了后缀s会导致配置不生效。
• fetch用法错误：原生fetch没有params配置项，查询参数需要手动拼接到URL中；且GET请求不需要设置multipart/form-data类型的Content-Type，该类型仅用于POST提交表单/文件的场景。

修复方案 #

你需要用自己的后端做代理转发请求，后端请求第三方接口不存在跨域限制，前端只需要请求你自己的后端接口即可。

修正后的前端代码

const trackBtn = () => { 
  // 拼接查询参数
  const searchParams = new URLSearchParams({trackingNumber: '423432432'})
  fetch(`http://你的后端服务地址/api/dhl/track?${searchParams}`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    },
    credentials: true
  }).then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });
}

修正后的后端代码（需要提前安装axios用于请求DHL接口）

const axios = require('axios')
// 修正cors配置的字段名
app.use(cors({
  origin:["http://localhost:3000"],
  methods:["GET","POST","OPTIONS","PUT"],
  credentials: true,
}));

// 新增DHL接口代理路由
app.get("/api/dhl/track", async (req,res) => {
  try {
    // 后端转发请求到DHL API
    const dhlResponse = await axios.get('https://api-eu.dhl.com/track/shipments', {
      params: req.query,
      headers: {
        'DHL-API-Key': 'apF7cO8oD2hN7v',
        'Accept': 'application/json'
      }
    })
    res.send(dhlResponse.data)
  } catch (err) {
    res.status(500).send({msg: '请求DHL接口失败', error: err.message})
  }
})

内容的提问来源于stack exchange，提问作者motionless570