鍍金池/ 問(wèn)答/HTML/ vue.js-使用proxyTable轉(zhuǎn)發(fā)請(qǐng)求訪問(wèn)豆瓣API，504錯(cuò)誤

vue.js-使用proxyTable轉(zhuǎn)發(fā)請(qǐng)求訪問(wèn)豆瓣API，504錯(cuò)誤

vue項(xiàng)目，使用axios訪問(wèn)豆瓣的API，出現(xiàn)跨域問(wèn)題。參考了網(wǎng)上的方法，config/index.js的dev中增加如下配置

proxyTable: {
      '/api': {
        target: 'http://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

    }

發(fā)送請(qǐng)求的代碼如下

export default {
  name:"Douban",
  created:function(){
      this.$axios.get('/api/movie/in_theaters')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
  }
}

npm run dev啟動(dòng)項(xiàng)目后，無(wú)法獲取數(shù)據(jù)。瀏覽器請(qǐng)求504錯(cuò)誤，
圖片描述
終端信息如下

I  Your application is running here: http://localhost:8080
[HPM] Error occurred while trying to proxy request /movie/in_theaters from localhost:8080 to http://api.douban.com/v2 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)
回答
編輯回答
不二心

代理配置完成之后 把啟動(dòng)本地服務(wù)的locahost 換為本地的ip啟動(dòng)服務(wù),這是服務(wù)端那邊做的某些限制

步驟詳細(xì)如下:

第一步 訪問(wèn)項(xiàng)目的locahost 變成你本地的ip
clipboard.png

第二步 配置代理

 proxyTable: {
  '/v2': {
    target: 'http://api.douban.com',
    changeOrigin: true,
   }

}

this.$axios.get('/v2/movie/in_theaters')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });   // 就按我寫(xiě)的配不需要更改

clipboard.png

clipboard.png

2018年1月1日 10:58