如何使用webpack-dev-server配置使Angular 2上的代理工作？

编程问答 2022-06-04

问题描述

我在Angular 2（2.4.1）中有一个应用程序，并且服务器具有以下内容：

前端在localhost：8081上运行，并且具有：

node v6.17.1
npm  v3.10.10

package.json中的devDependencies中：

"devDependencies": {
    ...,"typescript": "2.1.1","webpack": "1.13.3","webpack-dev-server": "1.16.2",...
}

"scripts": {
    "webpack": "webpack","server": "npm run server:dev","serverprod": "npm run server:prod","server:dev": "webpack-dev-server -d --config config/webpack.develop.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/","server:prod": "webpack-dev-server -d --config config/webpack.prod.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/","server:dev:hmr": "npm run server:dev -- --hot","start": "npm run server",...
}

在webpack.config.js中：

 devServer: {
        headers: {"Access-Control-Allow-Origin": "*"},proxy: {
            '/api': {
                target: 'http://localhost:8080',secure: false,changeOrigin: true
            }
        },port: MetaDATA.port,//8081
        host: MetaDATA.host,//localhost
        historyApiFallback: true,watchOptions: {
            aggregateTimeout: 300,poll: 1000
        },outputPath: helpers.root('dist'),stats: 'errors-only',// hide all the verbose info
    },

我将API称为：

export class Api {
    constructor(protected http: Http) {

    }

    public call() {
        ...
        http.post("/api",requestBody,{headers: headers})
            .map(...
    }
}

我的服务器位于localhost：8080上，而我尝试访问的端点位于localhost：8080 / api

现在，当我使用npm start启动应用程序时，我可以在日志中看到以下内容：

...
70% 3/3 build modules[HPM] Proxy created: /api  ->  http://localhost:8080
 http://localhost:8081/
webpack result is served from /home/
...

当调用API时，我可以在浏览器控制台中看到以下内容：

zone.js:1561 POST http://localhost:8081/api 404 (Not Found)

意思是，它不会像我希望的那样将请求代理到端口8080，而是尝试访问端口8081上的API并失败。

如何使其代理请求？

我试图用“ / api *”，“ / api / *”，“ / api **”，“ / api / **”配置它，但它不会改变行为。 该应用程序不使用“ ng”，也没有angular.json，因此据我所知，其他代理方法是不可能的。

可能是“ zone.js”问题吗？

为什么在启动应用程序时在http://localhost:8081/之后写入Proxy created: /api -> http://localhost:8080，这是否意味着要覆盖代理目标地址？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularproxyproxywebpackwebpackwebpackwebpack-dev-server