在做一個(gè)vue+node的個(gè)人博客時(shí)罩驻，突然想如果前臺在開發(fā)環(huán)境下可以和服務(wù)端連起來測試就好了悔常。但是由于端口不同，所以得跨域請求了瞬浓，但是前臺開發(fā)完后初婆，是不是全部URL都要改？
于是搜索了一下瑟蜈，發(fā)現(xiàn)了“proxyTable”烟逊。
修改config/文件夾下的index.js
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {//虛擬目錄
target: 'http://127.0.0.1:3000',//地址
changeOrigin: true,
pathRewrite: {
'^/api': ''//由于上面的虛擬目錄實(shí)際上是不存在的，不去掉的話訪問的時(shí)候顯示的url會(huì)變成'http://127.0.0.1:3000/api'铺根，所以得去掉
}
}
},
配置了上面的參數(shù)后宪躯，在調(diào)用時(shí)就要（這里用的是axios,例如地址是http://127.0.0.1:3000/aaa）
axios.post('/api/aaa', {})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
為什么要有個(gè)‘/api’？因?yàn)椴襟E1那里寫的是‘/api’,那怎么辦?別忘了位迂，因?yàn)橛玫氖莂xios访雪，所以可以配置一下baseURL 详瑞，我這里就全局配置baseURL
axios.defaults.baseURL = '/api'
這樣就可以通過代理訪問服務(wù)端了
如果不想通過代理而是直接訪問服務(wù)端，那就在服務(wù)端配置允許所有域訪問
配置服務(wù)端
服務(wù)端我用的是express框臣缀，不借助其它包可以這樣配置
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
/*讓options請求快速返回*/
} else {
next();
}
});
然后用cors坝橡，可以這樣配置
//獨(dú)自設(shè)置
var cors = require('cors');
app.post('/aaa',cors(), ...);
//全局設(shè)置
var cors = require('cors')
var app = express()
app.use(cors())
更多用法請參考cors
大功告成啦！可以愉快地繼續(xù)寫代碼啦
