問題描述

如何實(shí)現(xiàn)線上環(huán)境使用setting.host + ’/api/sop/’，本地dev請(qǐng)求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’: '' } }},

問題解答

用的vue-resource，理論上思路是一樣的。proxyTable和nginx的反向代理是一樣的道理，攔截特定的url，轉(zhuǎn)發(fā)到其他服務(wù)器。

// configproxyTable: { ’/api’: { target: ’http://10.0.0.10:8080’, changeOrigin: true, pathRewrite: { ’^/api’: ’/api’ } }}// codethis.$http.post(’/api/login’,{ username: ’xxx’, password: ’xxx’}).then((response) => { // ...}, (response) => { // ...});# 生產(chǎn)環(huán)境 nginxlocation /api { proxy_pass http://10.0.0.10:8080/api;}回答2：

可以配置一個(gè)環(huán)境變量，通過判斷環(huán)境變量確定使用哪一種配置

process.NODE_ENV === ’LOCAL’ ? proxyTableLocal : proxyTableServer回答3：

設(shè)置后, npn run dev階段, 本地如果訪問’/get/apple, 本地服務(wù)器會(huì)幫你訪問http://api.com:6688/get/apple拿到遠(yuǎn)程的數(shù)據(jù), 變相的實(shí)現(xiàn)了跨域功能

打開config/index.js, 添加proxyTable屬性

module.exports = {

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

}

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