如何在Blazor .NET 6（WebAssembly）中获取客户端IP并解决CORS问题

方案1：使用JSONP请求（适配ipify接口支持） #

你调用的ipify接口已支持JSONP（URL中已包含callback=JSONP_CALLBACK参数），可以通过动态创建script标签的方式发起请求，绕过CORS限制：

function fetchUserIP() {
  // 定义全局回调函数
  window.JSONP_CALLBACK = function(response) {
    console.log("用户IP地址：", response.ip);
    // 在此处理获取到的IP逻辑
    // 请求完成后清理全局回调，避免内存泄漏
    delete window.JSONP_CALLBACK;
  };

  // 创建script标签并加载接口
  const scriptElement = document.createElement('script');
  scriptElement.src = 'https://api.ipify.org/?format=json&callback=JSONP_CALLBACK';
  document.body.appendChild(scriptElement);

  // 加载完成后移除script标签
  scriptElement.onload = function() {
    scriptElement.remove();
  };
}

方案2：搭建后端代理接口 #

如果不想使用JSONP，可以搭建自己的后端服务转发ipify请求，由后端设置CORS规则允许你的前端域名访问：

Node.js Express代理示例 #

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = 3000;

app.get('/proxy-ip', async (req, res) => {
  try {
    const ipResponse = await fetch('https://api.ipify.org/?format=json');
    const ipData = await ipResponse.json();
    // 允许你的前端域名跨域访问
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5200');
    res.json(ipData);
  } catch (error) {
    res.status(500).json({ error: '获取IP失败' });
  }
});

app.listen(PORT, () => {
  console.log(`代理服务运行在 http://localhost:${PORT}`);
});

前端调用代理接口 #

async function getIPViaProxy() {
  const response = await fetch('http://localhost:3000/proxy-ip');
  const data = await response.json();
  console.log("用户IP地址：", data.ip);
}

关于addCors不可用的说明 #

WebAssembly运行在浏览器沙箱环境中，前端代码（包括Wasm）无法直接设置CORS响应头——CORS规则完全由目标服务器或你的代理服务器控制，因此前端侧不存在addCors这类功能，必须通过上述方式绕过或解决CORS限制。

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