React Apollo-Fetch使用大写URI替代小写uri报错原因咨询

这问题其实是个典型的ES6对象简写和库API参数匹配的坑，我给你一步步捋清楚：

1. 报错的核心原因 #

createApolloFetch这个工具函数的配置对象明确要求传入小写的uri属性，它内部的逻辑只会读取这个特定的属性名来获取GraphQL服务地址。当你把代码改成：

const URI = 'https://...';
const apolloFetch = createApolloFetch({ URI });

这里用了ES6的对象属性简写，等价于{ URI: URI }——但函数根本不认URI这个属性，所以它会使用默认的请求路径：/graphql。

2. 为什么会出现file://协议？ #

如果你的React应用是直接打开本地的index.html文件（没有通过npm start这类命令启动本地开发服务器），浏览器会用file://协议加载页面资源。这时候请求相对路径/graphql，就会被浏览器解析成file:///graphql，而Fetch API出于安全限制，不支持file协议下的这类本地文件系统请求，于是就抛出了那个错误。

3. 常量名和URI字符串的关系 #

其实常量名本身和字符串内容没有直接关联，问题出在你传递给函数的配置对象的属性名。原本的{ uri }是因为常量名和函数需要的属性名一致，所以简写生效；改成大写URI后，简写出来的属性名也变成了大写，和函数期望的uri不匹配，相当于没传正确的服务地址。

修复方案 #

两种方式都可以：

• 如果你想保留大写常量名，就不要用简写，明确指定属性名：

  const URI = 'https://...';
  const apolloFetch = createApolloFetch({ uri: URI });
  

• 或者继续使用小写的uri常量，保持原来的简写写法：

  const uri = 'https://...';
  const apolloFetch = createApolloFetch({ uri });
  

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