跟随Moralis DEX教程调用1inch API时遭遇CORS跨域错误求助

问题背景 #

在完成Moralis DEX教程时，前端swap.js组件直接调用1inch的3个核心API（allowance/approve/swap）触发CORS跨域错误。Moralis API功能正常，教程代码未使用1inch API密钥即可运行，但本地环境中无论使用公开API还是开发者API都无法绕过CORS限制。

核心原因 #

CORS错误源于浏览器同源策略：前端直接请求第三方API时，对方服务器未将你的前端域名（http://localhost:3000）加入跨域白名单。注意：前端请求头添加Access-Control-Allow-Origin完全无效，这个头是服务器返回给浏览器的响应头，不是前端发送的请求头。

具体解决思路 #

1. 基于现有后端做代理（生产+开发通用，推荐） #

你已经有集成Moralis的后端index.js，直接在后端添加1inch API的代理路由，让后端转发请求（后端不受浏览器同源策略限制）：

• 后端示例（Express框架）：

// 在后端index.js中添加代理路由
const axios = require('axios');

// 代理allowance接口
app.get('/api/1inch/allowance', async (req, res) => {
  try {
    const { tokenAddress, walletAddress } = req.query;
    const apiRes = await axios.get('https://api.1inch.io/v5.0/1/approve/allowance', {
      params: { tokenAddress, walletAddress }
    });
    res.json(apiRes.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: '代理请求失败' });
  }
});

// 同理添加approve和swap的代理路由
app.get('/api/1inch/approve', async (req, res) => {
  try {
    const { tokenAddress } = req.query;
    const apiRes = await axios.get('https://api.1inch.io/v5.0/1/approve/transaction', {
      params: { tokenAddress }
    });
    res.json(apiRes.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: '代理请求失败' });
  }
});

app.get('/api/1inch/swap', async (req, res) => {
  try {
    const { fromTokenAddress, toTokenAddress, amount, fromAddress, slippage } = req.query;
    const apiRes = await axios.get('https://api.1inch.io/v5.0/1/swap', {
      params: { fromTokenAddress, toTokenAddress, amount, fromAddress, slippage }
    });
    res.json(apiRes.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: '代理请求失败' });
  }
});

• 前端swap.js修改请求地址为后端代理路由：

async function fetchDexSwap() { 
  const allowance = await axios.get(`/api/1inch/allowance`, {
    params: { tokenAddress: tokenOne.address, walletAddress: address }
  });

  if (allowance.data.allowance === "0") {
      const approve = await axios.get(`/api/1inch/approve`, {
        params: { tokenAddress: tokenOne.address }
      });
      setTxDetails(approve.data);
      console.log("not approved");
      return;
  }

  const tx = await axios.get(`/api/1inch/swap`, {
    params: {
      fromTokenAddress: tokenOne.address,
      toTokenAddress: tokenTwo.address,
      amount: tokenOneAmount.padEnd(tokenOne.decimals + tokenOneAmount.length, '0'),
      fromAddress: address,
      slippage: slippage
    }
  });

  let decimals = Number(`1E${tokenTwo.decimals}`);
  setTokenTwoAmount((Number(tx.data.toTokenAmount) / decimals).toFixed(2));
  setTxDetails(tx.data.tx);
}

2. 核对1inch API版本与跨域规则 #

• 教程使用的是api.1inch.io/v5.0，你后来切换到了api.1inch.dev/swap/v5.2，两个API的跨域配置可能不同。先换回教程的公开API地址，确认是否能正常访问。
• 如果必须使用开发者API（api.1inch.dev），检查1inch开发者门户是否有跨域白名单配置项，将http://localhost:3000加入允许列表；同时确认API密钥的格式是否正确（比如是否需要前缀Bearer ，即Authorization: Bearer YOUR_API_KEY）。

3. 开发环境临时绕过CORS（仅测试用） #

• 使用Chrome插件（如CORS Unblock）临时关闭同源策略限制；或启动Chrome时添加参数：

# Windows
chrome.exe --disable-web-security --user-data-dir="C://ChromeDevSession"

# Mac
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/chrome_dev_test"

注意：此方法仅适合本地开发测试，线上环境绝对禁止使用。

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