溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue項目中怎么解決跨域問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue項目中怎么解決跨域問題”吧!
跨域報錯是前端開發中非常經典的一個錯誤，報錯如下
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域錯誤源自于瀏覽器的同源策略，想要解決跨域首先要知道什么是同源策略
同源策略：著名的安全策略，URL有三個基本組成部分：協議+域名或ip+端口，三個必須完全相同稱之為同源，不同源的稱之為跨域
| URL | URL | 對比 |
|---|---|---|
| http://localhost:3000/ | https://localhost:3000/ | 不同源：協議不同 |
| http://localhost:3000/ | http://127.0.0.1:3000/ | 不同源：域名或ip不同 |
| http://localhost:3000/ | http://localhost:3001/ | 不同源：端口不同 |
| http://localhost:3000/ | http://localhost:3000/ | 同源 |
| http://127.0.0.1:3000/ | http://127.0.0.1:3000/ | 同源 |
注意：同源策略不是服務器行為，而是瀏覽器的行為，服務器會正常響應請求，但是如果不同源會被瀏覽器攔截
搭建一個express服務器用來演示跨域報錯
安裝express
npm i express
app.js
let express = require('express')
let app = express()
app.listen(3000, () => {
console.log('服務器已啟動...')
})
app.use(express.static('./views'))
app.get('/getTest', (req, res) => {
console.log(req.query)
res.send(req.query)
})views/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function getIpTest() {
axios({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
}
function getDnameTest() {
axios({
method: "get",
url: "http://localhost:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
}
</script>
</head>
<body>
<button onclick="getIpTest()">getIpTest</button>
<button onclick="getDnameTest()">getDnameTest</button>
</body>
</html>打開瀏覽器訪問http://127.0.0.1:3000/
調用getIpTest發送請求不會報錯，因為瀏覽器地址欄訪問的服務器是http://127.0.0.1:3000/ ，而方法內發送請求的URL也是http://127.0.0.1:3000/ ，視為同源
調用getDnameTest發送請求報錯，因為瀏覽器地址欄訪問的服務器是http://127.0.0.1:3000/ ，而方法內發送請求的URL也是http://localhost:3000/ ，視為跨域
Access to XMLHttpRequest at 'http://localhost:3000/......' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
打開瀏覽器訪問http://localhost:3000/
調用getDnameTest發送請求不會報錯，因為瀏覽器地址欄訪問的服務器是http://localhost:3000/ ，而方法內發送請求的URL也是http://localhost:3000/ ，視為同源
調用getIpTest發送請求報錯，因為瀏覽器地址欄訪問的服務器是http://localhost:3000/ ，而方法內發送請求的URL也是http://127.0.0.1:3000/ ，視為跨域
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
創建vue項目，安裝axios模塊
vue create app
npm install axios vue-axios
main.js
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
views/About.js
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
this.axios({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
},
},
};
</script>腳手架項目端口是8080而請求的express服務器端口是3000，不滿足同源策略，發送請求報跨域錯誤
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
解決辦法： 配置代理服務器
vue.config.js：修改后需要重啟腳手架項目
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
//配置http-proxy代理方式跨域
proxy: {
// 自定義請求的開頭,使用代理方式處理/demo開頭的請求,/xxx可以自定義
"/demo": {
// 往哪個服務器發請求
target: "http://127.0.0.1:3000",
pathRewrite: {
// ^代表字符串開頭,實際發送請求時,會把請求開頭的/demo刪除
// 因為/demo并不是請求的一部分,只是個代理的標識
"^/demo": "",
},
},
// 如果有其他網址也需要跨域則繼續配置
// "/其他的...": {
// target: "其他的請求地址",
// pathRewrite: {
// "^/其他的...": "",
// },
// },
},
},
})views/About.js
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
this.axios({
method: "get",
// 在原來的url上去掉http://127.0.0.1:3000換成/demo
url: "/demo/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
},
},
};
</script>原理：
跨域是瀏覽器的安全策略，服務器和服務器之間發送請求沒有跨域
在啟動腳手架的時候會啟動一個內置node服務器
請求的時候瀏覽器實際并沒有直接和需要請求的服務器通信，而是通過內置的node服務器在中轉
注意：
項目上線需要把打包后的文件放在服務器上運行，而不是啟動腳手架運行，也就沒有內置node服務器做代理，所以此方式只適用于開發測試階段
上線時需要使用nginx代理或者服務器配置cors(每種語言有自己不同的配置方式)
express中處理跨域需要使用cors模塊
npm i cors
app.js
let express = require('express')
// 引入cors模塊
var cors = require("cors");
let app = express()
app.listen(3000, () => {
console.log('服務器已啟動...')
})
// 配置跨域
app.use(cors({
// 允許跨域的服務器地址,可以寫多個
origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
// 使用cookie時需要設置為true
credentials: true
}));
app.use(express.static('./views'))
app.get('/getTest', (req, res) => {
console.log(req.query)
res.send(req.query)
})到此，相信大家對“Vue項目中怎么解決跨域問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
