Vue如何解決跨域問題詳解
什么是跨域
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數(shù)據(jù)。源指協(xié)議,端口,域名。只要這個3個中有一個不同就是跨域。 這里列舉一個經(jīng)典的列子:
#協(xié)議跨域
http://a.baidu.com訪問https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080訪問http://a.baidu.com:80;
#域名跨域
http://a.baidu.com訪問http://b.baidu.com;
通常在不同服務器訪問過程中可能會遇到跨域問題,也就是口頭上常說的策略同源問題 CORS
出現(xiàn)跨越一般就是判斷三個地方,http協(xié)議,請求地址,端口號,三者若有一處不相同,那么就會出現(xiàn)跨域,解決這個問題就要配置一個代理服務器,通過代理服務器實現(xiàn)跨域請求
解決跨域的情況一般就是如下圖:

Vue 中配置跨域的配置在 vue.config.js 文件中添加:
配置一個的寫法
module.exports = {
devServer: {
proxy: 'http://localhost:5000' // 配置訪問的服務器地址
}
}
配置多個的寫法
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000', // 配置訪問的服務器地址
pathRewrite: { '^/api': '' }, // 用于將請求中的 /api 字符串替換為空, 然后訪問地址就能正確訪問,若不添加此行配置,那么訪問地址就變成了: http://localhost:5000/api/request_url,這樣的請求就會出現(xiàn) 404 操作
ws: true, // 是否支持 webstocket, 默認是 true
changeOrigin: true // 用于控制請求頭中的 host 值, 默認是 ture
},
'/api2': {
target: 'http://localhost:6000', // 配置訪問的服務器地址
pathRewrite: { '^/api2': '' }, // 用于將請求中的 /api2 字符串替換為空, 然后訪問地址就能正確訪問,若不添加此行配置,那么訪問地址就變成了: http://localhost:6000/api/request_url,這樣的請求就會出現(xiàn) 404 操作
ws: true, // 是否支持 webstocket, 默認是 true
changeOrigin: true // 用于控制請求頭中的 host 值, 默認是 ture
}
}
}
}
添加完代理服務器的相關配置,就需要通過 ajax 請求訪問服務器了,一般 vue 中使用的都是 axios 庫,這里就以 axios 庫為例子:
安裝 axios
npm i axios
使用 axios
// 引入 axios 庫
import axios from 'axios'
export default {
name: 'Student', // 組件名稱
// 組件使用的方法
methods: {
注釋內(nèi)容 `:get 請求訪問 /api 前綴開頭的地址,實際上訪問的地址是: http://localhost:5000/request_url`
test1() {
axios.get('http://localhost:8080/api/request_url').then(res => {
console.log(res.data); // 輸出請求響應值內(nèi)容
});
},
注釋內(nèi)容 :`get 請求訪問 /api2 前端開頭的地址,實際上訪問的地址是:http://localhost:6000/request_url`
test2() {
axios.get('http://localhost:8080/api2/request_url').then(res => {
console.log(res.data); // 輸出請求響應值內(nèi)容
})
}
}
}
總結(jié)
到此這篇關于Vue如何解決跨域問題的文章就介紹到這了,更多相關Vue解決跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標簽頁切換效果(vue-cli)
本篇文章主要介紹了詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標簽頁切換效果(vue-cli),具有一定的參考價值,有需要的可以了解下2017-08-08

