JavaScript通过Fetch请求URL触发CORS保护错误，寻求解决方案

先纠正你代码里的两个明显问题 #

• 请求头里加Access-Control-Allow-Origin完全没用，这个是服务器返回给浏览器的响应头，用来授权跨域，客户端发请求时带这个头浏览器会直接忽略。
• 代码里的header是拼写错误，应该是headers（复数），不过这不是CORS错误的核心原因。

CORS错误的本质 #

NSE的这个API服务器没有配置允许你的前端域名发起跨域请求，浏览器的同源策略会直接拦截这类请求，这是浏览器的安全机制，前端没法直接绕过。

可行的解决办法 #

• 搭后端代理（推荐用于生产环境）
  前端没法直接突破同源限制，最稳妥的方式是自己写个后端服务，让后端去请求NSE的API，前端再请求自己的后端。比如用Node.js写个简单代理：

  // Node.js + Express 示例
  const express = require('express');
  const fetch = require('node-fetch');
  const app = express();
  
  app.get('/api/nse-derivatives', async (req, res) => {
    try {
      const nseRes = await fetch('https://www.nseindia.com/api/liveEquity-derivatives?index=nse50_fut', {
        credentials: 'include'
      });
      const data = await nseRes.json();
      res.json(data);
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  });
  
  app.listen(3000, () => console.log('代理服务运行在http://localhost:3000'));
  

  之后前端把请求地址改成http://localhost:3000/api/nse-derivatives，就不会触发CORS错误了。

• 检查NSE官方API规则
  有些网站会提供支持跨域的官方API、JSONP接口，或者允许开发者申请跨域授权。你可以去NSE的开发者平台看看有没有相关说明，按照官方要求调整请求方式。

• 本地测试临时方案
  如果只是本地开发测试，可以用浏览器插件（比如Allow CORS: Access-Control-Allow-Origin）临时关闭CORS检查，但这个只能自己用，上线绝对不能依赖这个。

优化后的前端代码示例 #

把嵌套的then改成链式调用，同时修正字符串拼接的写法，更易读：

<script>
fetch("http://localhost:3000/api/nse-derivatives")
  .then(res => res.json())
  .then(data => {
    // 可选链操作符避免data.Algo不存在时报错
    if (data.Algo?.length > 10) {
      let temp = "";
      data.Algo.forEach(itemData => {
        temp += `<tr>
          <td class="col-md-8">${itemData.underlying}</td>
          <td class="col-md-8">${itemData.identifier}</td>
          <td class="col-md-8">${itemData.instrumentType}</td>
          <td class="col-md-8">${itemData.contract}</td>
        </tr>`;
      });
      document.getElementById('data').innerHTML = temp;
    }
  })
  .catch(err => console.error('请求出错:', err));
</script>

内容的提问来源于stack exchange，提问作者I'm RamOP