一、跨域問(wèn)題解決
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access
原因:瀏覽器的同源策略不允許跨域訪問(wèn)要尔,所謂同源策略是指協(xié)議毫别、域名敏储、端口相同记劈。
解決:采用proxyTable解決膝藕。
proxyTable是什么鲸湃?
vue-cli提供的解決vue開(kāi)發(fā)環(huán)境下跨域問(wèn)題的方法,proxyTable的底層使用了http-proxy-middleware(https://github.com/chimurai/http-proxy-middleware)休偶,它是http代理中間件嚣潜,它依賴node.js,基
本原理是用服務(wù)端代理解決瀏覽器跨域:
cms跨域解決原理:
1椅贱、訪問(wèn)頁(yè)面http://localhost:11000/
2懂算、頁(yè)面請(qǐng)求http://localhost:11000/cms
由于url由http://localhost:31001/cms...改為“http://localhost:11000/cms.",所以不存在跨域
3庇麦、通過(guò)proxyTable由node服務(wù)器代理請(qǐng)求 http://localhost:31001/cms.
服務(wù)端不存在跨域問(wèn)題
們進(jìn)入 config/index.js 代碼下如下配置即可:
dev: {
// 靜態(tài)資源文件夾
assetsSubDirectory: 'static',
// 發(fā)布路徑
assetsPublicPath: '/',
// 代理配置表计技,在這里可以配置特定的請(qǐng)求代理到對(duì)應(yīng)的API接口
// 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ' ' //實(shí)際請(qǐng)求去掉/api以空字符串代替
}
}
},
// 本地訪問(wèn) http://localhost:11000
host: 'localhost', // can be overwritten by process.env.HOST