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服務器用來演示跨域報錯
安裝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處理跨域
創建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處理跨域
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項目中該如何解決跨域問題的文章就介紹到這瞭,更多相關Vue跨域問題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Nodejs如何解決跨域(CORS)
- 深入淺析同源與跨域,jsonp(函數封裝),CORS原理
- Ajax解決跨域之設置CORS響應頭實現跨域案例詳解
- vue axios中的get請求方式
- AJAX請求以及解決跨域問題詳解