React开发货币转换器调用API时遇CORS错误，寻求解决方案

先梳理你代码里的核心问题： #

• 请求方法冲突：你调用axios.get()但配置里写了method: 'POST'，PrivatBank的这个公开汇率接口是GET接口，必须用GET请求。
• 错误启用no-cors模式：这个模式会让浏览器完全屏蔽响应内容，你根本拿不到返回数据，完全没必要添加。
• 前端错误设置服务器端CORS头：Access-Control-Allow-Origin、Access-Control-Allow-Methods这类头是服务器端需要返回的响应头，前端请求里加这些不仅没用，还可能干扰正常请求。
• 冗余的凭证配置：这个公开API不需要身份凭证，withCredentials: true和credentials: 'same-origin'都是多余的，甚至会触发额外的预检请求。

修正后的代码： #

try {
    // 注意把URL里的&替换为&，axios会自动处理参数编码
    const { data } = await axios.get(
        'https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5'
    )
    data.push({ ccy: 'UAH', buy: '1', sale: '1' })
    data.splice(2, 1)
    return data
} catch (error) {
    console.error('请求错误详情:', error)
    alert('获取汇率数据失败，请稍后重试')
}

如果修正后仍有CORS错误： #

说明服务器未允许你的前端域名跨域，此时可以用前端代理方案绕过：

• Create React App 代理：在package.json中添加"proxy": "https://api.privatbank.ua"，然后请求地址改为/p24api/pubinfo?json&exchange&coursid=5
• Vite 代理：在vite.config.js中配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.privatbank.ua',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

之后请求地址改为/api/p24api/pubinfo?json&exchange&coursid=5

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