React .env文件显示在控制台，但不显示在fetch()中

Question

我有一个用create-react-app创建的react应用程序，我也有一个。env在根文件夹与REACT_APP_SERVER_URL。

在我的本地主机环境中，一切都按预期工作，但当我构建和部署到Firebase时，我得到错误SyntaxError: Unexpected token < in JSON at position 0。

在该方法中，如果我将其输出到控制台console.log(process.env.REACT_APP_SERVER_URL)，那么url将被写入控制台，我可以单击它并转到主页，这只是一个json响应(用于测试)。

然而，在下面的代码中，我得到了如上所述的SyntaxError

fetch(`${process.env.REACT_APP_SERVER_URL}/`, {
mode:"cors",
credentials :"include",
method : "GET",
headers : {
Accept : "application/json",
"Content-Type"  :"application/json"
}
})
.then(response => response.json())
.then(data => {
setHello(data.message)
console.log(data.message)
})
.catch(er => {
console.log("fetch was caught")
console.log(er)
})

如果我console.log(process.env)，那么我可以看到服务器url的正确值的对象，如果我将url从。env变量中获取的url替换为硬编码url(与打印到控制台的内容完全相同，例如https://serverapi.com/)，那么一切都如预期的那样工作，我看到data.message。

我试过const {REACT_APP_SERVER_URL} = process.env之类的东西，但也不起作用。

我不知道为什么我得到环境变量的错误。

Answer 1

当我输入这个时，它点击了，但在我的。env文件中，我有REACT_APP_SERVER_URL=https://server.com/然后在我的fetch里fetch(`${process.env.REACT_APP_SERVER_URL}/`)所以，因为我在SERVER_URL行末尾有一个/，也在fetch调用中，所以最终的代码有两个//，看起来像https://server.com//，这就是问题所在。我通过删除.env文件

中的/来修复这个问题。