跨域，指的是瀏覽器從一個域名的網頁去請求另一個域名的資源時，會觸發同源策略限制。Vue 作為一款前端框架，也需要解決跨域的問題才能更好的服務前端項目開發。
Vue 允許跨域的方法主要有兩種：
1. 服務端進行跨域設置
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery<script src="http://code.jquery.com/jquery-1.9.1.js"></script></head>
<body>
<script type="text/javascript">
$(document).ready(function() {
// 發送AJAX請求：
$.ajax({
url: "http://localhost:8080/server_JSONP_demo",
type: "GET",
data:{wd:"彭于晏電影"},
dataType: 'jsonp', // 數據類型為jsonp
jsonp: 'callback', // 服務端能夠獲取到的回調函數名
success: function (data) {
console.log(data);
},
error: function(xhr) {
console.log(xhr);
}
});
});
</script>
</body>
</html>2. 使用 vue-cli-proxy 跨域設置
// 首先安裝一個http-proxy-middleware：
npm install http-proxy-middleware --save-dev
// 然后創建 vue.config.js 文件，添加如下代碼：
module.exports = {
devServer: {
proxy: {
'/api': { // 代理請求的路由
target: 'http://192.168.1.104:8080', // 請求的后臺接口地址
ws: true, // 是否啟用websocket真實實現
changeOrigin: true, // 是否跨域
pathRewrite: { // 路徑重寫
'^/api': ''
}
}
}
}
}上述兩種方法都能夠解決 Vue 跨域問題，具體選擇哪種方法需要根據實際項目需求和開發團隊情況而定。