前言：跨域請求是在本地開發(fā)時(shí)經(jīng)常遇到的需求，也很簡單，只是幾句代碼配置一下的問題。我初次配置跨域請求時(shí)由于官方的說明太簡潔，找到的教程又落伍，調(diào)試了一番并沒有解決問題，到最后解決問題，已花費(fèi)了很多時(shí)間精力。所以再搭個(gè)項(xiàng)目從頭走一遍，不敢說是教程，僅作記錄。

說明：本文項(xiàng)目基于 Vue CLI?^4.3.0，Node.js v12.13.0. 和?express ~4.16.1?構(gòu)建，未安裝的話則需要先安裝，后文不再說明。

1.在桌面運(yùn)行 cmd，使用命令 vue create demo 創(chuàng)建一個(gè) vue 項(xiàng)目 demo,插件依賴等使用默認(rèn)配置：

2.項(xiàng)目創(chuàng)建成功之后，使用命令 cd demo，進(jìn)入 demo 文件夾，然后使用命令 npm run serve 啟動項(xiàng)目，端口默認(rèn)8080：

3.在瀏覽器中訪問?http://localhost:8080/?，可以看到本地運(yùn)行的 Vue 項(xiàng)目：

4.在 demo 文件夾中運(yùn)行 cmd，使用命令 express --view=ejs server 創(chuàng)建 node.js 項(xiàng)目 server：

5.創(chuàng)建完成之后，按照提示，使用命令 cd server 進(jìn)入 server 文件夾，使用命令 npm install 安裝所需依賴，使用 npm start 啟動項(xiàng)目，默認(rèn)端口3000：

6.在瀏覽器訪問?http://localhost:3000/，可以看到本地運(yùn)行的 Node.js 服務(wù)器項(xiàng)目：

7.用編輯器打開Vue項(xiàng)目demo，打開 server 文件夾下 routes 文件夾下的 index.js 文件，添加一個(gè)路由，返回結(jié)果為一個(gè)json對象：

8.在終端中重啟 Node.js 項(xiàng)目 server，然后在瀏覽器中訪問?http://localhost:3000/person，可以看到請求成功后的返回結(jié)果

9.使用命令 npm install axios 為Vue項(xiàng)目安裝用來做異步請求的 axios，然后在 main.js 中引入并綁定到Vue的原型上：

10.在Vue項(xiàng)目的 App.vue 文件中添加生命周期 mounted 的鉤子函數(shù)，用 axios 發(fā)起 get 請求，請求接口為 api/person。此時(shí)如果重啟Vue項(xiàng)目，在控制臺中能看到請求結(jié)果404 (Not Found)

11.在Vue項(xiàng)目根目錄下新建 vue.config.js，內(nèi)容如下:

1 module.exports ={2 devServer: {3 proxy: {4 '/api': {5 target: 'http://localhost:3000', //node.js服務(wù)器運(yùn)行的地址

6 ws: true,7 changeOrigin: true,8 pathRewrite: {9 '^/api': 'http://localhost:3000' //路徑重寫

10 }11 },12 }13 }14 }

12.重啟Vue項(xiàng)目，打開控制臺，可以看到請求到的數(shù)據(jù)：

總結(jié)

以上是生活随笔為你收集整理的node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。