React应用点击href时为外部URL添加自定义请求头的方案咨询

首先明确：浏览器通过<a>标签发起的跳转请求（GET方式）无法自定义请求头，这是浏览器的安全机制限制。你当前的代码问题在于，点击后同时触发了两个独立请求：

• 浏览器默认的<a>标签跳转GET请求（不带自定义头）
• Axios发起的POST请求（带自定义头，但大概率因跨域被拦截，且和跳转无关）

以下是几种可行的替代方案：

方案1：将参数放在URL查询字符串中 #

这是最通用的跨域传递信息方式，适用于目标服务器不可控的场景：

// 构造带参数的URL
const targetUrl = new URL('https://stackoverflow.com/');
targetUrl.searchParams.set('userState', value);
targetUrl.searchParams.set('userName', value);

// 渲染a标签
<a href={targetUrl.toString()} target='_blank' rel='noreferrer noopener'>
  {value}
</a>

目标服务器可通过URL查询参数获取这些信息，这种方式不受浏览器跨域或请求头限制。

方案2：先发起带自定义头的请求，再跳转（需目标服务器支持CORS） #

如果目标服务器允许你的域名跨域请求，且你需要先传递数据再跳转，可以这样做：

const handleClick = async (e) => {
  // 阻止a标签默认跳转
  e.preventDefault();
  try {
    // 发起带自定义头的请求
    await axios.post('https://stackoverflow.com/', data, {
      headers: {
        userState: value,
        userName: value
      }
    });
    // 请求成功后手动跳转
    window.open('https://stackoverflow.com/', '_blank', 'noreferrer noopener');
  } catch (err) {
    console.error('请求失败:', err);
  }
};

// 渲染a标签
<a onClick={handleClick} target='_blank' rel='noreferrer noopener'>
  {value}
</a>

注意：这种方式下，跳转的请求依然不带自定义头，只是提前完成了一次带头发送数据的请求。如果目标服务器是第三方（比如stackoverflow），大概率会因CORS策略拦截你的POST请求。

方案3：使用服务器代理（完全控制请求头） #

如果必须让跳转的请求携带自定义头，只能通过自己的服务器做代理：

1. 前端点击时请求你的后端接口，带上自定义头
2. 后端接收到请求后，添加自定义头，转发请求到目标URL
3. 后端将目标URL的响应返回给前端，或直接重定向

这种方式需要你拥有自己的服务器，且目标服务器允许你的服务器发起请求（无CORS限制）。

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