鍍金池/ 問(wèn)答/PHP  Linux  HTML/ vue-cli里的proxyTable怎么配置才能訪問(wèn)nginx上運(yùn)行的web服

vue-cli里的proxyTable怎么配置才能訪問(wèn)nginx上運(yùn)行的web服務(wù)？

大致說(shuō)下我遇到的問(wèn)題：
（1）http://test.yang.com，運(yùn)行在本地的網(wǎng)站，nginx服務(wù)器，后端用php實(shí)現(xiàn)，監(jiān)聽(tīng)的是本地80端口，hosts文件中將域名關(guān)聯(lián)到127.0.0.1。域名下http://test.yang.com/api/radi... 是可以訪問(wèn)到的接口，打開(kāi)網(wǎng)頁(yè)是可以訪問(wèn)到的。

clipboard.png

（2）http://localhost:8080，通過(guò)vue-cli搭建的一個(gè)node web服務(wù)
（3）我在/config/index.js中配置了下proxyTable：

  dev: {
    env: require('./dev.env'),
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://test.yang.com',
            changeOrigion: true,
            pathRewrite: {
                '^/api': '/api' // 這里不需要重寫(xiě)，這里寫(xiě)錯(cuò)了
            }
        }
    },

我嘗試了下面的幾種配置nginx都給返回了404：

    proxyTable: {
        '/api': {
            target: 'http://test.yang.com',
            changeOrigion: true,
        }
    },
    proxyTable: {
        '/api': {
            target: 'http://test.yang.com',
            changeOrigion: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    proxyTable: {
        '/': {
            target: 'http://test.yang.com',
            changeOrigion: true,
            pathRewrite: {
                '^/api': '/api'
            }
        }
    },
    proxyTable: {
        '/': {
            target: 'http://test.yang.com/api',
            changeOrigion: true,
        }
    },

然后重啟node服務(wù)，在頁(yè)面中用vue-resource發(fā)出請(qǐng)求：

    this.$http.get('/api/radio.php')
      .then(function (res) {
        console.log(res);
      }, function(res) {
        console.log(res)
      })

結(jié)果發(fā)現(xiàn)出現(xiàn)nginx返回了404錯(cuò)誤：

clipboard.png
（4）我的nginx的test.yang.com配置如下：

clipboard.png

我看了segmentfault上的一些關(guān)于proxyTable的文章，但是仍然不知道該怎么解決這個(gè)問(wèn)題，有哪位遇到過(guò)和我類似的問(wèn)題，請(qǐng)指教一下唄，謝謝。

PS:我還想問(wèn)下，我如何才能知道我發(fā)起請(qǐng)求時(shí)這個(gè)proxyTable到底代理目標(biāo)服務(wù)器的哪個(gè)接口地址？比如有沒(méi)有個(gè)工具或者日志能夠打印下。

回答
編輯回答
黑與白

proxyTable: {

    '/api': {
        target: 'http://test.yang.com',
        changeOrigion: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
},
這個(gè)寫(xiě)法  /api 代表 http://test.yang.com
this.$http.get('/api/radio.php') 表示 this.$http.get('http://test.yang.com/radio.php')
你的接口是 http://test.yang.com/api/radi... 當(dāng)然是404

你可以先這么寫(xiě)this.$http.get('http://test.yang.com/api/radi...') 測(cè)試一下 他會(huì)提示你跨域了
而不是404 然后在proxyTable 里繼續(xù)配置
nginx 不懂 一般瀏覽器能打開(kāi)訪問(wèn)到就是可以的

2017年8月19日 10:54
編輯回答
萌面人

估計(jì)是你 nginx 的 server_name 和請(qǐng)求的目的地址不一樣導(dǎo)致的，你把這一行去掉試試

進(jìn)一步研究的參考資料：
https://github.com/chimurai/h...
https://github.com/nodejitsu/...

2018年3月10日 15:54
編輯回答
醉淸風(fēng)

你可以看看你nginx里面的日志記錄，看看有沒(méi)有請(qǐng)求，請(qǐng)求到哪兒去了

2018年7月30日 11:31
編輯回答
擱淺

結(jié)合上面幾位給出的答案和建議，我總結(jié)一下我配置proxyTable、nginx時(shí)的誤區(qū)，希望能夠給后續(xù)遇到此類問(wèn)題的人填點(diǎn)兒坑。
1，proxyTable中的pathRewrite誤區(qū)，一般情況下pathRewrite是不需要配置的：

    proxyTable: {
        '/api': {
            target: 'http://test.yang.com',
            changeOrigion: true,
            // pathRewrite: {
            //    '^/api': ''
            // }
        }
    },

下面是我的理解，不正確的大家可以指出來(lái)。
（1）在程序中請(qǐng)求/api/api-01.php(ajax請(qǐng)求)，就相當(dāng)于在請(qǐng)求 http://test.yang.com/api/api-...，意思就是proxyTable背后的代理服務(wù)會(huì)代替ajax請(qǐng)求本地主機(jī)localhost:8080上/api/api-01.php而去請(qǐng)求目標(biāo)主機(jī)test.yang.com上的/api/api-01.php上的服務(wù)，然后將響應(yīng)返回。這里需要明確的就是本地主機(jī)和目標(biāo)主機(jī)的主機(jī)地址、端口。
（2）一般情況下是不需要用pathRewrite這個(gè)配置的。除非你的程序中有特殊的需求，比如你對(duì)請(qǐng)求路徑名有特殊的要求：必須以/myApi為開(kāi)頭，那么這時(shí)你就需要將/myApi重寫(xiě)為目的主機(jī)的路徑/api：
http://localhost:8080/myApi/api-01.php =》 http://test.yang.com/api/api-...。
2，nginx的localhost主機(jī)默認(rèn)監(jiān)聽(tīng)80端口，而且指向的web根目錄是/nginx/html，這個(gè)是在nginx的安裝路徑下，而這個(gè)根目錄下只有index.html和50x.html兩個(gè)頁(yè)面。所以，可以配置下根目錄，讓其指向test.yang.com根目錄，這樣做的目的第3條會(huì)做說(shuō)明。
3，我調(diào)試時(shí)發(fā)現(xiàn)，當(dāng)目標(biāo)主機(jī)test.yang.com監(jiān)聽(tīng)的端口為80時(shí)，代理會(huì)去找localhost主機(jī)下的路徑，如果你的localhost主機(jī)的根路徑?jīng)]有做第2條所說(shuō)的配置，那么nginx會(huì)返回404錯(cuò)誤。
ps：我的電腦上配置了好多監(jiān)聽(tīng)80端口的虛擬主機(jī)，我看nginx的error.log時(shí)發(fā)現(xiàn)，代理有時(shí)還會(huì)請(qǐng)求其他虛擬主機(jī)，不過(guò)這個(gè)bug我沒(méi)能復(fù)現(xiàn)，后續(xù)如果出現(xiàn)這個(gè)問(wèn)題再研究下。

2017年7月20日 23:39