Question

我只想知道你们是怎么做到的。

这是我所做的：

我分别创建了ReactJs和Springboot API。
在开发环境中，我使用npm start运行ReactJS，而Springboot仅运行应用程序。
使用以下命令访问reactJs：http://localhost:3000
使用axios通过http://localhost:8080来访问springboot api
由于从技术上来说，reactJs的请求是针对其他服务器（不同的服务器和不同的端口）的，所以我遇到了CORS问题：CORS策略：所请求的头上没有'Access-Control-Allow-Origin'标头资源。
所以我在api上添加了@CrossOrigin（origins =“ *”）。
一切都是彩虹和蝴蝶。

然后我将其部署到产品环境：

服务器是Ubuntu。
已将ReactJ部署到NGINX
Springboot API我只是将jar作为服务。

我遇到的第一个问题是我忘记用我的服务器的实际IP地址（http://12.34.56.789:8080而不是http://localhost:8080）替换React的API请求。因此，我想我的第一个问题是，如何在react中动态设置此API请求，以便在开发环境中时为http://localhost:8080，在prod env中时将其设置为IP地址。

第二个问题是，您通常会像这样部署ReactJs和Springboot API吗？另外，Springboot只是通过jar运行其自己的Applilcation Server。

第三，您能建议我做些什么来改进此设置？

非常感谢您。

Answer 1

您可以使用类似的方法来处理常量的交换：

var API = {
    production: JSON.stringify('prod-url'),
    development: JSON.stringify('dev-url')
}

var environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';

// webpack config
module.exports = {
    // define plugin can handle your constants
    plugins: [
        new webpack.DefinePlugin({
            'API_URL': API_URL[environment]
        })
    ],
    // ...
}

然后在您的组件中

    axios(API_URL).then(()=>{

});

需要提示：ReactJS前端和Springboot API部署策略

1 个答案: