Vue-cli代理解决跨域问题
生活随笔
收集整理的這篇文章主要介紹了
Vue-cli代理解决跨域问题
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
使用vue-cli調(diào)接口的時(shí)候,總是會(huì)出現(xiàn)垮與問題,因?yàn)関ue的localhost與訪問域名不一致導(dǎo)致。而這一點(diǎn),開發(fā)者顯然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有關(guān)于API proxy的說明,這個(gè)配置就是將localhost映射成訪問的域名。
那么何為代理?
代理服務(wù)器英文全稱是Proxy Server,其功能就是代理網(wǎng)絡(luò)用戶去取得網(wǎng)絡(luò)信息。形象的說:它是網(wǎng)絡(luò)信息的中轉(zhuǎn)站。可以簡(jiǎn)單粗暴理解為把你的域名轉(zhuǎn)換成你訪問的域名,(我這么記的,當(dāng)然可能并不恰當(dāng))形成同源,就能訪問。
?
那么在vue里,如何設(shè)置代理?
1.config目錄找到index.js
2.在dev里添加proxyTable
dev: {env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target:"http://47.93.166.112/BrainPcWeb",//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http changeOrigin:true, pathRewrite:{ '^/api':''//這里理解成用‘/api’代替target里面的地址,后面組件中我們掉接口時(shí)直接用api代替 //比如我要調(diào)用'http://40.00.100.133:3002/user/login',直接寫‘/api/user/login’即可 } } }這一步為止,你重新run一下vue已經(jīng)不存在跨域問題了。
但是注意了
這只是開發(fā)環(huán)境(dev)中解決了跨域問題,生產(chǎn)環(huán)境中真正部署到服務(wù)器上如果是非同源還是存在跨域問題
轉(zhuǎn)載于:https://www.cnblogs.com/wws-bk/p/9554669.html
總結(jié)
以上是生活随笔為你收集整理的Vue-cli代理解决跨域问题的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: App项目内存优化计划
- 下一篇: 红外线接受程序 理解