无法在Chrome/Edge访问GitHub Raw文件，移动端可正常打开求助

问题详情 #

• 在Chrome或Microsoft Edge桌面浏览器中访问GitHub Raw格式的JSON链接（https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json）时，出现访问失败报错
• 浏览器报错截图：
  
• 控制台报错截图：
  
• 移动端浏览器可正常打开该链接
• 需要将此JSON文件通过Fetch API集成到React项目中，当前相关代码如下：

import React, { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import ProjectCard from "./ProjectCards";
import Particle from "../Particle";

function Projects() {

  const [project, setProject] = useState([])

  const fetchProject = async () => {
    const url = 'https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json';
    let data = await fetch(url);
    let myProjects = await data.json();
    setProject(myProjects.projects);
  }

  useEffect(() => {
    fetchProject();
  });

  return (
    <Container fluid className="project-section">
      <Particle />
      <Container>
        <h1 className="project-heading">
          My Recent <strong className="purple">Works </strong>
        </h1>
        <p style={{ color: "white" }}>
          Here are a few projects I've worked on recently.
        </p>
        <Row style={{ justifyContent: "center", paddingBottom: "10px" }}>

          {project.map((element) => {
            return <Col md={4} className="project-card" key={element.imgurl}>
              <ProjectCard
                imgPath={element.imgurl}
                isBlog={false}
                title={element.title}
                description={element.description}
                ghLink={element.sourceLink}
                badge={element.badge}
                demoLink={element.liveDemoLink}
              />
            </Col>
          })}

        </Row>

      </Container>
    </Container>
  );
}

export default Projects;

解决建议 #

1. 排查浏览器扩展拦截 #

• 暂时禁用Chrome/Edge的所有扩展（尤其是广告拦截、隐私防护类，如uBlock Origin、Privacy Badger），重新测试链接访问
• 若恢复正常，逐个启用扩展排查，将raw.githubusercontent.com添加到对应扩展的白名单

2. 修复React代码的useEffect问题 #

当前代码中useEffect缺少依赖数组，会导致组件每次渲染都重复发起请求，可能触发GitHub的请求限流。修改如下：

useEffect(() => {
  fetchProject();
}, []); // 空依赖数组确保仅在组件挂载时执行一次请求

3. 为Fetch添加错误捕获 #

增加错误处理逻辑，明确请求失败的具体原因：

const fetchProject = async () => {
  const url = 'https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json';
  try {
    let data = await fetch(url);
    if (!data.ok) {
      throw new Error(`请求失败，状态码：${data.status}`);
    }
    let myProjects = await data.json();
    setProject(myProjects.projects);
  } catch (error) {
    console.error('获取项目数据失败：', error);
  }
}

4. 网络环境排查 #

• 尝试更换DNS服务器（如谷歌DNS 8.8.8.8 或Cloudflare DNS 1.1.1.1）
• 检查本地防火墙、代理软件是否限制了raw.githubusercontent.com的访问
• 若处于受限制网络环境，可尝试使用VPN或移动热点测试

5. 本地文件替代方案 #

如果远程访问持续失败，可将JSON文件下载到React项目的public目录，修改请求路径为本地文件：

const url = '/project.json'; // 假设文件放在public文件夹根目录

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