我有一个React应用程序,它向Laravel后端发出API请求。
我的应用程序托管在Heroku上(我不知道它是否为我的问题改变了一些东西)。
我想为这些请求区分生产环境和本地环境。
在我的“welcome.blade.php”中,我添加了以下 meta标记:
<meta name="app_env" content="<?php echo env("APP_ENV") ?>" />
APP_ENV包含“生产”或“本地”。
在我的React应用程序中,我有以下脚本:
export let urlApi = (document.querySelector("[name=app_env]").content === "production" ) ?
"https://laravel-react.herokuapp.com/api"
:
"http://localhost/laravel_react/public/api"
;
我在每个需要它的组件中导入这个函数:
import { urlApi } from './../findUrlApi';
// .....
return fetch(`${urlApi}/products`,{
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer "+localStorage.getItem("token")
}
})
它工作正常。
但我的问题是,这是一个好的实践吗?(我是React的初学者)。
1条答案
按热度按时间mctunoxg1#
我不认为这是一个好的做法。环境变量(如
APP_ENV
和API URL)不应该驻留在源代码中。但是,您可以像往常一样将它们存储在Laravel
.env
文件中,但要在密钥前加上前缀MIX_
。例如:MIX_API_URL=http://localhost
。.env
文件中的每个MIX_*
变量都将向React应用程序公开。然后,您可以通过调用process.env.MIX_API_URL
从React应用程序获取MIX_API_URL
值。更新的Laravel
.env
文件在需要它的React组件中
如果调用
process.env.MIX_API_URL
不起作用,并且您正在运行npm run watch
,请尝试重新启动npm run watch
并硬重新加载浏览器。参考文献