為什么要設(shè)置跨域
- 在
web交互的環(huán)境中沾瓦，只能保證請求發(fā)自某個用戶的瀏覽器，卻不能保證請求本身是用戶自愿發(fā)出的浮庐。
想象這樣一個場景性湿，如果世界上沒有跨域限制，這時假如：
- 支付寶的轉(zhuǎn)賬操作是一個
post請求襟衰，大概是https://alipay.com/api/withdraw/?to_user=kindJeff&amout=1000 - 我寫了一段
ajax的post請求代碼贴铜，請求連接是上面的url。然后我把這段代碼嵌入我的網(wǎng)站a.com
你不久前登陸過支付寶瀑晒，瀏覽器里保存了alipay.com域名的cookie - 我讓你訪問
a.com绍坝，打開頁面，于是在你不知情的情況下發(fā)出了post請求苔悦，你的錢就被轉(zhuǎn)到我的賬號里了
這就是跨站請求偽造（CSRF）轩褐。這是一個非常嚴重的后果，其利用的就是網(wǎng)站（上例的支付寶）對瀏覽器的充分信任玖详。所以瀏覽器一定會設(shè)置跨域限制把介，避免在用戶和網(wǎng)站不知情的情況下發(fā)出請求。
VUE中如何繞過跨域
我們在實際
vue的開發(fā)過程中蟋座，都是啟動本地的localhost:端口來進行模擬請求服務(wù)器的接口拗踢，這時候服務(wù)器如果設(shè)置了跨域，那我們的請求就會被拒絕向臀。
VUE腳手架中設(shè)置跨域配置
在
config文件夾下的index.js找到proxyTable這個對象巢墅，重寫該對象的內(nèi)容。切記是重寫券膀，一定要重寫君纫，一定要重寫，一定要重寫芹彬，配置如下參數(shù)蓄髓。
腳手架跨域配置
// 跨域配置
proxyTable: {
'/api': { //此處并非一定和url一致。
target: '服務(wù)器地址舒帮。比如： https://api.weibo.com/2',
changeOrigin: true, //允許跨域
pathRewrite: {
'^/api': ''
}
}
},
我們可以全局搜索下
proxyTable会喝，其實是在webpack.dev.conf.js的proxy引用了這個對象陡叠。也就是說當(dāng)我們是自己搭建的腳手架，那么直需要在webpack的devServer這個對象下的proxy設(shè)置如上的跨域配置好乐，也是可以行的匾竿。
配置axios的請求路徑
我們只需要將
axios的baseURL設(shè)置為api，就能實現(xiàn)跨域蔚万。該api字段需要與proxyTable的名稱保持一致岭妖。比如proxyTable設(shè)置的是test，那么這邊的baseURL就為test
const request = axios.create({
baseURL: 'api'
})
const params = {
count: 20,
access_token: '微博token'
}
request.get('/statuses/home_timeline.json', { params })
請求結(jié)果
VUE3.0下跨域的配置
- 在創(chuàng)建的
vue.config.js加入如下代碼
module.exports = {
// 開發(fā)環(huán)境下服務(wù)的配置
devServer: {
hot: true, //自動保存
open: true, // 是否自動打開瀏覽器
// https: true, // 是否支持https
host: '0.0.0.0',
port: 8080,
// 跨域配置
proxy: {
'/api': { //此處并非一定和url一致反璃。
target: '服務(wù)器的url請求地址',
changeOrigin: true, //允許跨域
ws: true,
pathRewrite: {
'^/api': '' // rewrite path
}
}
}
},
}
總結(jié)：
-
vue腳手架中找到proxyTable字段昵慌，并重寫它，設(shè)置跨域配置和服務(wù)器地址淮蜈。 - 自己搭建的腳手架斋攀，在
webpack下的devServer配置proxy對象，值與上面的一樣配置梧田。 - 請求的時候淳蔼，將請求路徑改為設(shè)置的名稱，比如
api裁眯。瀏覽器中的network地址則會變?yōu)?code>http://0.0.0.0:端口/api
