跨域：不同源即跨域
同源：域名沸停，協(xié)議，端口均相同
瀏覽器的同源策略昭卓，是瀏覽器對 JavaScript 施加的安全限制愤钾。
http://www.reibang.com/p/cfbccb0adae9
開發(fā)、測試環(huán)境的跨域問題：配置devServer.proxy
vue-cli3中將擴(kuò)展和基礎(chǔ)配置都寫在根目錄的vue.config.js中候醒。vue.config.js 是一個可選的配置文件能颁，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載倒淫。https://cli.vuejs.org/zh/config/#vue-config-js
axios配置
主要在于axios.defaults.baseURL伙菊，其他都是個人記錄，一些封裝比如token之類的
在開發(fā)/測試環(huán)境中，因?yàn)橄旅鏁褂胮roxy方法镜硕，所以此處的baseURL不太重要运翼，它在proxy中會被替換，隨便寫也沒事
// 創(chuàng)建 axios 實(shí)例 開發(fā)域名
const wristbandService = axios.create({
baseURL: '', //設(shè)置為空
// baseURL: 'http://172.31.231.91:8080/', //設(shè)置baseURL相當(dāng)于給所有此類請求前加上baseURL兴枯，這里可以用導(dǎo)入的變量
timeout: 6000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
// 下面這些都和跨域無關(guān)
wristbandService.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
config.headers['Authorization'] = 'Bearer ' + token // 讓每個請求攜帶自定義 token 請根據(jù)實(shí)際情況自行修改
}
return config
}, err)
wristbandService.interceptors.response.use(response => {
return response.data
}, err)
const installer = {
vm: {},
install(Vue) {
Vue.use(wristbandService)
}
}
export { wristbandService as WBaxios} // 最后封裝完的請求是WBaxios
vue.config.js中devServer配置
注意：devServer用于本地開發(fā)環(huán)境南蹂，生產(chǎn)環(huán)境是不生效的。
https://cli.vuejs.org/zh/config/#devserver-proxy
在下面的代碼里：
1念恍、proxy會攔截所有url中可以成功匹配到 '/api/wristband' 的請求六剥。（proxy采用正則匹配，一旦url中包含你要的字符串則停止向下匹配峰伙，詳查proxy匹配規(guī)則）
2疗疟、它會把攔截到的請求中的baseUrl替換為此處的target
3、changeOrigin：true 表示跨域
devServer: {
// development server port 8000
port: 8000,
proxy: {
'/api/wristband': {
target: 'http://172.xx.xxx.xx:8080/', // 攔截到'api/wristband'的瞳氓，將axios中baseURL替換成target
ws: true, // proxy websockets
changeOrigin: true, // 是否跨域
// pathRewrite: { // 重寫策彤，根據(jù)需要
// '^/api/wristband': '/api/newpath',
// }
},
}
},
}
api調(diào)用
import { WBaxios } from 'xxxxx' // 導(dǎo)入封裝的請求
export function getDataOfIndicatorChart (params) {
return WBaxios({ // 請求
url: `/api/wristband/test`, //此處請求的url
method: 'get',
params: { ...params }
})
}
重點(diǎn)
WBaxios發(fā)出請求時，會將此處的url前面加上配置過的baseURL匣摘，這一個整體店诗，會被proxy檢測攔截，proxy操作過后就可以跨域了
生產(chǎn)(線上)環(huán)境的跨域問題：后端Nginx反向代理/cors跨域配置
由于devServer只用于本地環(huán)境音榜，生產(chǎn)環(huán)境是不生效的庞瘸，所以上面所說的devServer.proxy方法無效
axios配置
這里baseURL要配置成我們實(shí)際請求的服務(wù)器端口
// 創(chuàng)建 axios 實(shí)例 開發(fā)域名
const wristbandService = axios.create({
baseURL: 'http://172.xx.xxx.xx:8080/', //設(shè)置baseURL相當(dāng)于給所有此類請求前加上baseURL，這里可以用導(dǎo)入的變量
timeout: 6000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
vue.config.js不用配置proxy赠叼，api調(diào)用相同擦囊，此時請求的地址是‘http://172.xx.xxx.xx:8080/api/wristband/test’。重點(diǎn)是后端要進(jìn)行跨域相關(guān)配置嘴办！
antd-vue-prohttps://github.com/vueComponent/ant-design-vue-pro/issues/91
簡潔https://www.cnblogs.com/yaowen/p/10559586.html
.envhttps://blog.csdn.net/Liu_yunzhao/article/details/94077271
vue-cli3 config https://gitee.com/mrpzx/vue-cli3-config#proxy
