使用create-react-app构建的React应用：URL末尾斜杠的作用及相关问题咨询

问题背景 #

你用create-react-app搭建的React应用遇到了一个奇怪的问题：运行npm start后浏览器打开localhost:3000/proj/t（无末尾斜杠）时，fetch请求错误地尝试访问localhost:3000/proj/t/proj/data/file.json，但在URL末尾加上斜杠后，就能正常获取localhost:3000/proj/t/data/file.json的数据，且确认slug值始终正确。

问题2：为什么会出现这种现象？ #

这本质是浏览器对相对路径的解析规则导致的：

• 当URL末尾带有斜杠（如localhost:3000/proj/t/）时，浏览器会把t识别为一个目录，页面中所有相对路径（比如你的./data/${slug}.json）都会基于这个目录来解析，最终生成正确的/proj/t/data/file.json路径。
• 当URL末尾没有斜杠（如localhost:3000/proj/t）时，浏览器会默认把t当成一个文件资源，而非目录。此时相对路径的解析会基于t的父目录/proj/，再结合create-react-app开发环境的资源路径配置，就会出现路径拼接错误，最终生成了错误的/proj/t/proj/data/file.json。

简单来说：末尾斜杠决定了浏览器对当前路径的“身份判定”——是目录还是文件，直接影响相对路径的解析结果。

问题1：如何配置npm start打开带末尾斜杠的URL？ #

有两种简单的方法可以实现，不需要复杂的配置：

方法1：修改package.json的启动命令 #

直接在scripts的start命令中指定打开的完整URL：

"scripts": {
  "start": "react-scripts start --open http://localhost:3000/proj/t/"
}

运行npm start时，浏览器就会直接打开带斜杠的目标URL，无需手动添加。

方法2：使用环境变量配置 #

在项目根目录创建.env.development文件（开发环境专属配置），添加以下内容：

BROWSER="http://localhost:3000/proj/t/"

保存后重启npm start，浏览器会自动打开这个带斜杠的地址。

你之前修改homepage字段没效果是正常的：homepage主要用于生产环境构建时生成正确的静态资源路径，开发环境下create-react-app会忽略这个配置，所以不会影响本地URL的打开行为。

额外建议 #

为了彻底避免这类相对路径解析问题，你可以把fetch的路径改成绝对路径，比如：

const getData = () => { 
  fetch(`/proj/t/data/${slug}.json` , { 
    headers: { 
      'Content-Type': 'application/json', 
      'Accept': 'application/json' 
    } 
  } ).then(function(response) { 
    return response.json(); 
  } ).then(function(myJson) { 
    // 处理逻辑
  }) 
};

这样无论URL是否带斜杠，都能精准指向正确的资源路径，一劳永逸解决问题。

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