本地Vue項目跨域請求本地Node.js服務器的配置方法


前言:跨域請求是在本地開發時經常遇到的需求,也很簡單,只是幾句代碼配置一下的問題。我初次配置跨域請求時由於官方的說明太簡潔,找到的教程又落伍,調試了一番並沒有解決問題,到最后解決問題,已花費了很多時間精力。所以再搭個項目從頭走一遍,不敢說是教程,僅作記錄。

說明:本文項目基於 Vue CLI ^4.3.0,Node.js v12.13.0. 和 express ~4.16.1 構建,未安裝的話則需要先安裝,后文不再說明。

1.在桌面運行 cmd,使用命令 vue create demo 創建一個 vue 項目 demo,插件依賴等使用默認配置:

2.項目創建成功之后,使用命令 cd demo,進入 demo 文件夾,然后使用命令 npm run serve 啟動項目,端口默認8080:

3.在瀏覽器中訪問 http://localhost:8080/ ,可以看到本地運行的 Vue 項目:

4.在 demo 文件夾中運行 cmd,使用命令 express --view=ejs server 創建 node.js 項目 server:

5.創建完成之后,按照提示,使用命令 cd server 進入 server 文件夾,使用命令 npm install 安裝所需依賴,使用 npm start 啟動項目,默認端口3000:

6.在瀏覽器訪問 http://localhost:3000/,可以看到本地運行的 Node.js 服務器項目:

7.用編輯器打開Vue項目demo,打開 server 文件夾下 routes 文件夾下的 index.js 文件,添加一個路由,返回結果為一個json對象:

8.在終端中重啟 Node.js 項目 server,然后在瀏覽器中訪問 http://localhost:3000/person,可以看到請求成功后的返回結果

9.使用命令 npm install axios 為Vue項目安裝用來做異步請求的 axios,然后在 main.js 中引入並綁定到Vue的原型上:

10.在Vue項目的 App.vue 文件中添加生命周期 mounted 的鈎子函數,用 axios 發起 get 請求,請求接口為 api/person。此時如果重啟Vue項目,在控制台中能看到請求結果404 (Not Found)

11.在Vue項目根目錄下新建 vue.config.js,內容如下:

 1 module.exports = {
 2     devServer: {
 3         proxy: {
 4             '/api': {
 5                 target: 'http://localhost:3000',   //node.js服務器運行的地址
 6                 ws: true,
 7                 changeOrigin: true,
 8                 pathRewrite: {
 9                     '^/api': 'http://localhost:3000'  //路徑重寫 
10                 }
11             },
12         }
13     }
14 }

12.重啟Vue項目,打開控制台,可以看到請求到的數據:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM