鍍金池/ 問(wèn)答/HTML5  HTML/ 如何給ajax請(qǐng)求接口地址做反向代理？

如何給ajax請(qǐng)求接口地址做反向代理？

目前我們的前端項(xiàng)目是用gulp打包編譯的。后端是用php。打包生成的文件是存放在php項(xiàng)目里的。
每次修改都要漫長(zhǎng)的npm run build:dev ，這樣太耗時(shí)間了
然后，test.xxx.com 進(jìn)行訪問(wèn)。這個(gè)地址做了host指向127.0.0.1，這是沒(méi)問(wèn)題的
(為了解決漫長(zhǎng)編譯這個(gè)問(wèn)題，就是使用熱更新)

使用ng serve實(shí)現(xiàn)熱更新。但是主機(jī)地址是 127.0.0.1:4200

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

如果啟用127.0.0.1:4200，那么，接口的地址應(yīng)該是 127.0.0.1:4200/api/Apply/SearchApply 顯然這樣是拿不到數(shù)據(jù)的，正確的數(shù)據(jù)地址是 test.xxx.com/api/Apply/SearchApply

有沒(méi)有一種方法就是訪問(wèn)127.0.0.1:4200的時(shí)候，數(shù)據(jù)的地址都是指向到test.xxx.com這個(gè)主機(jī)上的？
如：test.xxx.com/api/Apply/SearchApply , 而不是127.0.0.1:4200/api/Apply/SearchApply

如果上面的方法可行，那么，會(huì)有跨域的問(wèn)題嗎？

回答
編輯回答
拽很帥

大概有三種方式可以實(shí)現(xiàn)

代碼層級(jí)實(shí)現(xiàn)

請(qǐng)求發(fā)起的庫(kù)，如axios，jquery 的$.ajax 之類的，都會(huì)類似baseUrl 的屬性
設(shè)置 baseUrl 為test.xxx.com 即可。
缺陷： 可能會(huì)根據(jù)不同的環(huán)境設(shè)置不同的baseUrl 。

webpack 實(shí)現(xiàn)

使用webpack devServer的請(qǐng)求代理轉(zhuǎn)發(fā)功能

    devServer: {
        host: '0.0.0.0',
        port: 4200,
        disableHostCheck: true,
        historyApiFallback: true,
        noInfo: true,
        proxy: {
            '/api/': {
                /*代理轉(zhuǎn)發(fā)服務(wù)器，即本地調(diào)試的服務(wù)器，可訪問(wèn)線上，開(kāi)發(fā)測(cè)試等環(huán)境的 后端系統(tǒng)*/
                target: `http://test.xxx.com`,
                changeOrigin: true,
            }
        },
    },

fiddler 抓包工具實(shí)現(xiàn)

通過(guò)fiddler之類的抓包工具，將請(qǐng)求攔截，并轉(zhuǎn)發(fā)到指定的server。
缺點(diǎn)： 可能需要對(duì)抓包工具的使用比較熟練

2017年6月4日 13:55
編輯回答
尐潴豬

搞個(gè)跨域行嗎

2017年4月1日 19:37
編輯回答
淺時(shí)光

最簡(jiǎn)單易行的方式，讓后端開(kāi)發(fā)或運(yùn)維在test.xxx.com這臺(tái)服務(wù)器上設(shè)置cross origin頭為統(tǒng)配*；當(dāng)然僅限開(kāi)發(fā)環(huán)境。

具體可以度娘，其他的如轉(zhuǎn)發(fā)，代理之類的都稍微會(huì)多幾個(gè)步驟

2017年5月24日 13:35