快捷導(dǎo)航

Vue項目中該如何解決跨域問題

更新時間：2022年06月09日 17:08:47 作者：有怪獸

當(dāng)協(xié)議,域名,端口其中某一個不一致的時候,就會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于Vue項目中該如何解決跨域問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

跨域

跨域報錯是前端開發(fā)中非常經(jīng)典的一個錯誤，報錯如下

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有三個基本組成部分：協(xié)議+域名或ip+端口，三個必須完全相同稱之為同源，不同源的稱之為跨域

URL	URL	對比
http://localhost:3000/	https://localhost:3000/	不同源：協(xié)議不同
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/	同源

注意：同源策略不是服務(wù)器行為，而是瀏覽器的行為，服務(wù)器會正常響應(yīng)請求，但是如果不同源會被瀏覽器攔截

express服務(wù)器

搭建一個express服務(wù)器用來演示跨域報錯

安裝express

 npm i express

app.js

 let express = require('express')
 let app = express()
 ?
 app.listen(3000, () => {
     console.log('服務(wù)器已啟動...')
 })
 ?
 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/

調(diào)用getIpTest發(fā)送請求不會報錯，因為瀏覽器地址欄訪問的服務(wù)器是http://127.0.0.1:3000/ ，而方法內(nèi)發(fā)送請求的URL也是http://127.0.0.1:3000/ ，視為同源

調(diào)用getDnameTest發(fā)送請求報錯，因為瀏覽器地址欄訪問的服務(wù)器是http://127.0.0.1:3000/ ，而方法內(nèi)發(fā)送請求的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/

調(diào)用getDnameTest發(fā)送請求不會報錯，因為瀏覽器地址欄訪問的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請求的URL也是http://localhost:3000/ ，視為同源

調(diào)用getIpTest發(fā)送請求報錯，因為瀏覽器地址欄訪問的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請求的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處理跨域

創(chuàng)建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服務(wù)器端口是3000，不滿足同源策略，發(fā)送請求報跨域錯誤

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.

解決辦法：配置代理服務(wù)器

vue.config.js：修改后需要重啟腳手架項目

 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
     //配置http-proxy代理方式跨域
     proxy: {
       // 自定義請求的開頭,使用代理方式處理/demo開頭的請求,/xxx可以自定義
       "/demo": {
         // 往哪個服務(wù)器發(fā)請求
         target: "http://127.0.0.1:3000",
         pathRewrite: {
           // ^代表字符串開頭,實際發(fā)送請求時,會把請求開頭的/demo刪除
           // 因為/demo并不是請求的一部分,只是個代理的標(biāo)識
           "^/demo": "",
         },
       },
       // 如果有其他網(wǎng)址也需要跨域則繼續(xù)配置
       // "/其他的...": {
       //   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>

原理：

跨域是瀏覽器的安全策略，服務(wù)器和服務(wù)器之間發(fā)送請求沒有跨域

在啟動腳手架的時候會啟動一個內(nèi)置node服務(wù)器

請求的時候瀏覽器實際并沒有直接和需要請求的服務(wù)器通信，而是通過內(nèi)置的node服務(wù)器在中轉(zhuǎn)

注意：

項目上線需要把打包后的文件放在服務(wù)器上運行，而不是啟動腳手架運行，也就沒有內(nèi)置node服務(wù)器做代理，所以此方式只適用于開發(fā)測試階段

上線時需要使用nginx代理或者服務(wù)器配置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('服務(wù)器已啟動...')
 })
 ?
 // 配置跨域
 app.use(cors({
     // 允許跨域的服務(wù)器地址,可以寫多個
     origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
     // 使用cookie時需要設(shè)置為true
     credentials: true
 }));
 ?
 app.use(express.static('./views'))
 ?
 app.get('/getTest', (req, res) => {
     console.log(req.query)
     res.send(req.query)
 })