如何给ajax请求接口地址做反向代理？

Question

目前我们的前端项目是用gulp打包编译的。后端是用php。打包生成的文件是存放在php项目里的。
每次修改都要漫长的npm run build:dev ，这样太耗时间了
然后，test.xxx.com 进行访问。这个地址做了host指向127.0.0.1，这是没问题的
(为了解决漫长编译这个问题，就是使用热更新)

使用ng serve实现热更新。但是主机地址是 127.0.0.1:4200

this.http.post("api/Apply/SearchApply")

如果启用127.0.0.1:4200，那么，接口的地址应该是 127.0.0.1:4200/api/Apply/SearchApply 显然这样是拿不到数据的，正确的数据地址是 test.xxx.com/api/Apply/SearchApply

有没有一种方法就是访问127.0.0.1:4200的时候，数据的地址都是指向到test.xxx.com这个主机上的？
如：test.xxx.com/api/Apply/SearchApply , 而不是127.0.0.1:4200/api/Apply/SearchApply

如果上面的方法可行，那么，会有跨域的问题吗？

Answer 1

大概有三种方式可以实现

代码层级实现

请求发起的库，如axios，jquery 的$.ajax 之类的，都会类似baseUrl 的属性
设置 baseUrl 为test.xxx.com 即可。
缺陷： 可能会根据不同的环境设置不同的baseUrl 。

webpack 实现

使用webpack devServer的请求代理转发功能

    devServer: {
        host: '0.0.0.0',
        port: 4200,
        disableHostCheck: true,
        historyApiFallback: true,
        noInfo: true,
        proxy: {
            '/api/': {
                /*代理转发服务器，即本地调试的服务器，可访问线上，开发测试等环境的 后端系统*/
                target: `http://test.xxx.com`,
                changeOrigin: true,
            }
        },
    },

fiddler 抓包工具实现

通过fiddler之类的抓包工具，将请求拦截，并转发到指定的server。
缺点： 可能需要对抓包工具的使用比较熟练

Answer 2

最简单易行的方式，让后端开发或运维在test.xxx.com这台服务器上设置cross origin头为统配*；当然仅限开发环境。

具体可以度娘，其他的如转发，代理之类的都稍微会多几个步骤

Answer 3

搞个跨域行吗