javascript - vue-cli proxyTable怎麼配置
高洛峰
高洛峰 2017-05-16 13:39:25
0
3
898

如何實現線上環境使用setting.host + '/api/sop/',本地dev請求localhost:3000呢?

const instance = axios.create({
  baseURL: setting.host + '/api/sop/',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

config


  proxyTable: {
  '/api': {
    target: "http://127.0.0.1:3000",
    changeOrigin: true,
    pathRewrite: {
      '^/api': ""
    }
  }
},
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(3)
世界只因有你

用的vue-resource,理論上思路是一樣的。 proxyTablenginx的反向代理是一样的道理,拦截特定的url,轉送到其他伺服器。

// config
proxyTable: {
  '/api': {
    target: 'http://10.0.0.10:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

// code
this.$http.post('/api/login',{
  username: 'xxx',
  password: 'xxx'
}).then((response) => {
  // ...
}, (response) => {
  // ...
});

# 生产环境 nginx
location /api {
  proxy_pass http://10.0.0.10:8080/api;
}
迷茫

可以配置一個環境變量,透過判斷環境變數來決定使用哪一種配置

process.NODE_ENV === 'LOCAL' ? proxyTableLocal : proxyTableServer
phpcn_u1582

設定後, npn run dev階段, 本地如果訪問'/get/apple, 本地伺服器會幫你訪問http://api.com:6688/get/apple拿到遠端的資料, 變相的實現了跨域功能

開啟config/index.js, 新增proxyTable屬性

module.exports = {

build: {...}
dev: {
       ...
    proxyTable: {
        '/': {
                 target: 'http://api.com:6688',
                 changeOrigin: true
            }
    },
       ...
}

}

https://github.com/383514580/...

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!