角码未正确连接到我的Spring后端

Question

我试图将我的Jhipster 4.0项目（使用Angular 4）更新为Jhipster 6.0（使用Angular 9）。角度版本和打字稿版本之间存在如此大的差异，以至于我只创建了一个Jhipster 6.0项目，然后替换了该Jhipster 6.0项目中的所有以下文件。这些文件已被Jhipster 4.0项目中的文件替换，因此我可以使前端再次工作-src / main / webapp-src /测试-package.json-Webpack-tsconfig.json

本质上，这使它再次使用angular 4 ...使其使用旧的打字稿...并使其具有所有旧的前端代码。我可以带来很好的应用程序应用程序（使用./mvnvw和npm start）……但是然后我注意到，当我转到前端（http://localhost:9001/#/dash）时，它尝试连接到localhost：9001 /上的java后端。 api / apps，错误为-> Error occurred while trying to proxy to: localhost:9061/api/apps

但是，当我使用mvnw启动应用程序...时，它将在http://localhost:8080/api/apps上启动后端。因此，我如何才能停止与localhost:9001/api/apps交谈，而改为与http://localhost:8080/api/apps交谈。

我使用./mvnw ...运行后端，然后使用npm start启动前端

这是我的webpack.dev.js：

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'development';

module.exports = webpackMerge(commonConfig({env: ENV}), {
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console',
                '/auth'
            ],
            target: 'http://127.0.0.1:8081',
            secure: false
        }],
        watchOptions: {
            ignored: /node_modules/
        }
    },
    entry: {
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/css/global.css',
        main: './src/main/webapp/app/app.main'
    },
    output: {
        path: utils.root('target/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            enforce: 'pre',
            loaders: 'tslint-loader',
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        },
            {
                test: /\.ts$/,
                loaders: [
                    'angular2-template-loader',
                    'awesome-typescript-loader'
                ],
                exclude: ['node_modules/generator-jhipster']
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader'],
                exclude: /(vendor\.css|global\.css)/
            },
            {
                test: /(vendor\.css|global\.css)/,
                loaders: ['style-loader', 'css-loader']
            }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9001,
            proxy: {
                target: 'http://localhost:9061' // TODO - original
                // target: 'http://localhost:8080' // TODO - original
            }
        }, {
            reload: false
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            utils.root('src/test'),
        ]),
        new WebpackNotifierPlugin({
            title: 'JHipster',
            contentImage: path.join(__dirname, 'logo-jhipster.png')
        })
    ]
});

Answer 1

默认情况下，如果您从仅具有URL（例如http）的角度开发服务器发出任何/api/someapi请求，那么它将仅路由到角度开发服务器。

您可以在运行角度开发服务器时使用代理配置，以将数据路由到所需的目标。

在项目根目录中创建proxy.conf.json。

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

然后通过运行ng serve --proxy-config proxy.conf.json启动angular dev服务器>