深度採坑指南之vue-cli代理跨域proxy解決跨域限制
阿新 • • 發佈:2019-01-04
由於我是用vue-cli建立的專案,訪問介面純在跨域問題,本地伺服器的預設地址為http://localhost:8080/,伺服器端的域名不是這個,就會造成跨域訪問,axios不支援jsonp,所以我們可以利用http-proxy-middleware中介軟體做代理。
使用axios直接訪問會報出以下錯誤
Failed to load http://m.xusong.com/api/NEWS/getNews.json?page=1&pageSize=10: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Uncaught (in promise) Error: Network Error
at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16)
at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87)
這類的意思就是禁止跨域
vue中程式碼
getNewsList() { const url = 'http://xxxx.com/api/NEWS/getNews.json?page=1&pageSize=10' axios.get(url) .then((res) => { res = res.data if (res.state) { this.news = res.result } }) }
那麼該如何解決呢?
在webpack配置一下proxyTable就OK了
訪問檔案config/index.js
在dev{}里加入以下內容
proxyTable: { '/api': { target: 'http://xxx.com:8080', // 你要代理的域名和埠號,要加上http changeOrigin: true,//如果需要跨域那麼需要加上引數changeOrigin:true pathRewrite: { '^/api': '/api' // 這裡用‘/api’代替target裡面的地址,元件中呼叫介面時直接用api代替 比如我要呼叫'http://xxx.com:8080/api/NEWS/getNews.json?page=1&pageSize=10 ',直接寫‘/api/NEWS/getNews.json?page=1&pageSize=10’即可 } }
示例程式碼:
getNewsList() {
const url = '/api/NEWS/getNews.json?page=1&pageSize=10'
axios.get(url)
.then((res) => {
res = res.data
if (res.state) {
this.news = res.result
}
})
}
感謝分享https://blog.csdn.net/u012699754/article/details/80402926