一牛欢、前言
前端常見解決跨域的方法有
1逸绎、降域惹恃、
2、jsonp（只支持get方法）棺牧、
3巫糙、CORS（Cross-origin resource sharing--跨域資源共享）、
4颊乘、PostMessage（HTML5的API）参淹、
5、location.hash方法乏悄、
6浙值、window.name方法、
7檩小、document.domain方法（需要主域相同）开呐、
8、動態(tài)創(chuàng)建script
9规求、web sockets（需要服務(wù)器支持）
總九種方法筐付；具體解釋，推薦看前端解決跨域問題的8種方案（最新最全） 和 js同源策略阻肿、跨域瓦戚、jsonp基礎(chǔ)知識問答及跨域資源共享 CORS 詳解
二、正文
今天弄vue-cli時丛塌，遇到了跨域問題----想要獲取
http://tingapi.ting.baidu.com/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList
返回的數(shù)據(jù)较解。直接使用跨域了，因此需要使用代理了：
介紹兩種方法：
（一）赴邻、proxyTable法
1印衔、在vue-cli項目文件中找到\config\index.js 中的proxyTable: {}，設(shè)置
proxyTable: {
'/v1': {
target: 'http://tingapi.ting.baidu.com', //需要代理的網(wǎng)址
changeOrigin: true,
pathRewrite: {
'^/v1': '/v1'
}
}
},
2乍楚、在vue-cli項目中找到\src\App.vue 在某方法中添加如下代碼：
this.$http.get("/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList")
.then(m=>console.log(m));
上面的$http 其實是我引入的axios -- 在 vue-cli項目文件中的/src/main.js 引入
import axios from 'axios'
Vue.prototype.$http = axios;
當(dāng)然 不使用Vue.prototype.$http 直接 axios.get(xxxx) 也是可以的当编。
這樣我們可以在瀏覽器中看到請求變成了
http://localhost:8080/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList
也就是實現(xiàn)了本地代理了届慈，這樣就不存在跨域了徒溪。
（二）、dev-server法
1金顿、在vue-cli項目文件中找到\build\dev-server.js
2臊泌、按照我以前的一個項目 添加相應(yīng)語句。這樣在前端直接按照如下語句即可獲得數(shù)據(jù):
this.$http.get('/api/getSliderData').then(res => {
console.log("耶揍拆！代理數(shù)據(jù)是渠概。。。", res.data);
三播揪、跨域代理工具推薦
當(dāng)然贮喧，如果你用的網(wǎng)站不支持后端添加配置，也不想使用上述vue-cli設(shè)置代理等猪狈，其實作為前端我們可以使用現(xiàn)成的跨域代理工具箱沦。今天發(fā)現(xiàn)了一個比較好的跨域代理工具： JsonBird ，
它的github地址：https://github.com/xCss/JsonBird
文檔地址：https://github.com/xCss/JsonBird/wiki
例子地址：https://jsfiddle.net/LNing/duL5Lby7/
具體使用可詳見相關(guān)介紹雇庙。
https://bird.ioliu.cn/v1/?url=你想跨域的網(wǎng)址
四谓形、插件法
安裝瀏覽器插件：Allow CORS: Access-Control-Allow-Origin
https://chrome.google.com/webstore/detail/lhobafahddgcelffkeicbaginigeejlf
五、禁止瀏覽器檢查跨域方法
Chrome瀏覽器如何開啟Ajax跨域訪問調(diào)試疆前？
https://www.imooc.com/video/16577
六寒跳、其它推薦文章
2竹椒、簡單設(shè)置童太，解決使用webpack前后端跨域發(fā)送cookie的問題
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處碾牌。謝謝康愤！ *
