角度代码无法正确连接到我的spring后端

我试图将我的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

In essence this makes it use angular 4 again ... makes it use the old typescript ... and lets it have all of the old front-end code. I can bring the application app just fine (using ./mvnvw and npm start) ... but then I notice that when I go to my frontend (http://localhost:9001/#/dash) , it tries to connect to the java backend at localhost:9001/api/apps, which gives an error of -> Error occurred while trying to proxy to: localhost:9061/api/apps

However when I started the app with mvnw... it starts up the backend on http://localhost:8080/api/apps. So how can I get this to stop talking to localhost:9001/api/apps and instead talk to http://localhost:8080/api/apps.

这是我的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')
        })
    ]
});
评论
  • XXOO
    XXOO 回复

    By default if you made any http request from angular dev server with just URL (e.g. /api/someapi) then it will get routed to angular dev server only.

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

    Create proxy.conf.json in your project root directory.

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

    Then start the angular dev server by running ng serve --proxy-config proxy.conf.json