学习JSON和AJAX时从GitHub加载JSON文件遇跨域错误，求解决方案

嘿，我之前也踩过这个坑！GitHub的raw文件服务其实有默认的CORS限制，你之前偶尔能成功大概率是缓存或者临时的宽松策略，但长期来看直接从前端请求肯定会触发No 'Access-Control-Allow-Origin' header错误。给你几个实用的解决办法：

方法1：用GitHub Pages托管JSON文件（最稳定的线上方案） #

把你的JSON文件放到GitHub仓库的gh-pages分支，或者直接在仓库的「Settings」里开启GitHub Pages功能。之后你就能通过https://<你的用户名>.github.io/<仓库名>/<文件名>.json这个地址访问文件，GitHub Pages的域名是允许跨域请求的，前端直接请求这个URL就不会有问题了。

方法2：给Browser Sync加本地代理（开发阶段专用） #

既然你用Browser Sync当本地服务器，可以通过配置中间件来转发请求，绕过CORS限制。比如创建一个bs-config.js配置文件：

module.exports = {
  server: './', // 你的项目根目录
  middleware: [
    function(req, res, next) {
      // 识别需要转发的GitHub JSON请求
      if (req.url.startsWith('/github-proxy/')) {
        // 替换成真实的raw.githubusercontent.com地址
        const targetUrl = req.url.replace('/github-proxy/', 'https://raw.githubusercontent.com/');
        
        // 用fetch转发请求（需要确保你的Node环境支持fetch，或者用axios/http模块）
        fetch(targetUrl)
          .then(response => response.json())
          .then(data => {
            res.setHeader('Content-Type', 'application/json');
            res.end(JSON.stringify(data));
          })
          .catch(err => {
            console.error('转发请求出错:', err);
            next(err);
          });
      } else {
        // 其他请求正常处理
        next();
      }
    }
  ]
};

之后启动Browser Sync时指定这个配置文件：browser-sync start --config bs-config.js，前端就可以请求/github-proxy/<用户名>/<仓库>/<分支>/<文件>.json，由Browser Sync帮你转发请求，避开跨域限制。

方法3：直接把JSON文件下载到本地（最快的开发测试方案） #

既然你之前成功下载过目标JSON文件，直接把它存到你的本地项目目录里，前端请求本地路径比如./assets/data.json，完全不会有跨域问题，适合开发时快速验证功能。

补充一句：GitHub的raw服务本来就不是为前端跨域请求设计的，所以别依赖偶尔的成功，用上面的方法才能稳定解决问题～

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