Vue Node 專案中的跨域請求問題

如果你是在使用vue在做前端專案，那麼你肯定對vue和node的組合不陌生。無論是在實際的專案中還是我們自己做的demo中，但凡涉及到api介面請求，都會接觸到跨域這一技術名詞。

這篇部落格介紹的是如何在vue + node專案中解決跨域請求的問題，部落格中會介紹兩種跨域的設定方案，即前端跨域設定和後端跨域設定。

其他的不多說，直接開始吧！

首先我們先說一下如何在前端設定跨域，其實準確來說應該是在前端設定跨域**。在前端設定跨域的時候，我們是在webpack中進行配置。需要說明的是：vue-cli 2.x版本和vue-cli 3.0版本在webpack的配置上有些不同，我們這裡以 vue-cli 3.0 為例進行介紹：

如果你之前做過webpack的相關配置，那麼在你專案的根目錄中肯定會有乙個名為vue.config.js的檔案，如果沒有，那就新建乙個。注意該檔案是在專案的根目錄中，也就是和src資料夾同級資料夾。

然後直接複製下面這些**到你的vue.config.js檔案中，下面對這些**進行說明。

module.exports =}}}};

上面的**等同於一下**：

module.exports =}}}};

在上述的配置中，我們可以看到兩種配置方式的些許不同，這說明跨域**最終匹配到的api位址是由target和pathrewrite兩個屬性共同決定的。

我們在前端設定完成**之後，就可以跨域請求了，比如下面使用axios進行請求的乙個例子：

import axios from 'axios';
export default 
},created() ).then(data => );}};

在我的專案中，前端的埠是0802，後端的埠是0801，我們可以看到上面我們請求的url是/api/goods，經過前端跨域**的處理之後，最終訪問的url是http://localhost:8081/api/goods，這樣的話，就解決了跨域的問題。

但是需要注意的是，如果這個時候你在開發者工具中檢視自己請求的api位址的時候，看到的是http://localhost:8082/api/goods ，但是不要慌，這是沒錯的，因為跨域**是在後台對api位址進行重定向的。

如果你想問：在前端不進行設定跨域行不行，感覺好麻煩，我就是想簡簡單單的請求乙個自己寫的api，有沒有其他的辦法。辦法是有的，也就是下面要說的在後端設定跨域請求。

比如我們在後端使用node寫了乙個api，在該api之前進行跨域設定，使得在所有域中都可以訪問api，**如下：

var express =
require
('express');
express()
;// api 返回的結果
const goods =
;// 設定跨域
all(
"*",
function
(req, res, next));
get(
'/api/goods'
,(req, res)
=>);
});listen
(8081,(
)=>
)

這樣一來，我們就可以在自己的專案中，請求這個api了，但是要注意的是，這個時候我們需要使用該api的 *絕對完整路徑，比如下面的請求例項：

import axios from 'axios';
export default 
},created() ).then(data => );}};

通過上面的介紹，我們知道現在有兩種配置跨域的方法，那麼你可能想問在專案中要使用哪乙個呢？

我的建議是：兩個同時使用。前端使用跨域**，能夠讓我們簡化我們的api請求路徑。

後端設定跨域，可以讓我們的api更加便捷，避免出現跨域請求的問題。同時你也可以在後端跨域的設定中，根據實際需求決定在哪些域中可以請求自己寫的api，這樣更加安全。

Vue Node 專案中的跨域請求問題

vue cli專案中的跨域問題

跨域實際專案中處理方法

vue 解決vue node開發中的跨域問題

Vue Node 專案中的跨域請求問題

vue cli專案中的跨域問題

跨域實際專案中處理方法

vue 解決vue node開發中的跨域問題

相關推薦