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

Question

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

以下是我所做的：

>

我分别创建了ReactJs和Springboot API。

在开发环境中，我使用npm start运行ReactJS，Springboot只运行应用程序。

使用http://localhost:3000访问reactJs

使用axios从react with:http://localhost:8080访问springboot api

由于来自reactJs的请求从技术上讲是到不同的服务器（不同的服务器和不同的端口）：我遇到了CORS问题：CORS策略：请求的资源上没有'Access-Control-Allow-Origin'标头。

所以我在API上添加了@crossorrigin(origins=“*”）。

一切都是彩虹和蝴蝶。

然后我部署到prod环境：

>

服务器是Ubuntu。

部署到NGINX的ReactJs

Springboot API我刚刚把jar变成了一个服务。

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(()=>{

});