使用JsFiddle发起跨域请求遇CORS错误，求助Node.js解决方案

嘿，这个问题我太熟了！你碰到的是典型的跨域资源共享（CORS）限制——浏览器出于安全考虑，会阻止前端直接请求不同域名的资源，除非目标服务器主动返回了Access-Control-Allow-Origin头。既然前端没法自己添加这个响应头，咱们完全可以用Node.js搭个代理服务器来绕开这个限制，下面给你详细讲讲几种可行的方案：

方法1：用Node.js + Express搭轻量代理服务器 #

这是最常用的方案，原理是让Node服务器作为中间层：先帮你请求目标资源，再给前端返回带正确CORS头的响应。

步骤： #

1. 先初始化Node项目并安装依赖：

npm init -y
npm install express cors axios

2. 创建代理文件（比如proxy-server.js）：

const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
// 给所有响应自动添加允许跨域的头
app.use(cors());

// 定义代理路由，通过url参数传递目标资源地址
app.get('/fetch-resource', async (req, res) => {
  try {
    const targetUrl = req.query.target;
    if (!targetUrl) {
      return res.status(400).send('请传入目标资源的url参数');
    }
    
    // 代理请求目标资源
    const response = await axios.get(targetUrl);
    // 将目标资源内容返回给前端
    res.send(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(`请求失败：${error.message}`);
  }
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('代理服务器已启动：http://localhost:3000');
});

3. 启动代理服务器：node proxy-server.js
4. 修改你JsFiddle里的Ajax请求，指向代理服务器：

$.ajax({
  url: 'http://localhost:3000/fetch-resource?target=https://你要请求的目标页面地址',
  method: 'GET',
  success: function(data) {
    console.log('成功获取资源：', data);
  },
  error: function(err) {
    console.error('请求出错：', err);
  }
});

方法2：用Node原生http模块写代理（无额外依赖） #

如果不想装太多第三方包，也可以用Node自带的http模块实现：

const http = require('http');
const { URL } = require('url');

const server = http.createServer((req, res) => {
  // 解析请求中的目标资源地址
  const urlParams = new URL(req.url, 'http://localhost').searchParams;
  const targetUrl = urlParams.get('target');
  
  if (!targetUrl) {
    res.writeHead(400, { 'Content-Type': 'text/plain' });
    return res.end('缺少target参数，请传入目标资源URL');
  }

  // 发起对目标服务器的请求
  const targetRequest = http.get(targetUrl, (targetResponse) => {
    // 给前端返回响应时，手动添加CORS头
    res.writeHead(targetResponse.statusCode, {
      'Access-Control-Allow-Origin': '*', // 生产环境建议替换为你的前端域名
      'Content-Type': targetResponse.headers['content-type']
    });
    // 把目标服务器的响应内容转发给前端
    targetResponse.pipe(res);
  });

  targetRequest.on('error', (err) => {
    res.writeHead(500, { 'Content-Type': 'text/plain' });
    res.end(`请求目标资源失败：${err.message}`);
  });
});

server.listen(3000, () => {
  console.log('原生代理服务器运行在：http://localhost:3000');
});

额外提示：让JsFiddle能访问本地代理 #

因为JsFiddle是在线环境，直接访问localhost:3000会失败，你可以用工具把本地端口暴露到公网，比如用ngrok：

1. 安装ngrok后，运行：ngrok http 3000
2. 复制ngrok生成的公网URL（比如https://xxxx-xx-xx-xx-xx.ngrok.io），替换到你的Ajax请求里就行。

生产环境注意事项 #

• 不要用Access-Control-Allow-Origin: *，应该指定具体的前端域名（比如https://jsfiddle.net），避免安全风险。
• 如果需要处理POST请求或带Cookie的请求，还要给代理服务器添加Access-Control-Allow-Credentials: true头，并转发请求体和Cookie。

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