本地Vue项目跨域请求本地Node.js服务器的配置方法

小豚豚豚鼠 發表於 2020-4-12 11:44:00

本地Vue项目跨域请求本地Node.js服务器的配置方法

前言：跨域请求是在本地开发时经常遇到的需求，也很简单，只是几句代码配置一下的问题。我初次配置跨域请求时由于官方的说明太简洁，找到的教程又落伍，调试了一番并没有解决问题，到最后解决问题，已花费了很多时间精力。所以再搭个项目从头走一遍，不敢说是教程，仅作记录。
说明：本文项目基于 Vue CLI ^4.3.0，Node.js v12.13.0. 和 express ~4.16.1 构建，未安装的话则需要先安装，后文不再说明。
1.在桌面运行 cmd，使用命令 vue create demo 创建一个 vue 项目 demo,插件依赖等使用默认配置：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412094958182-799497952.png">
2.项目创建成功之后，使用命令 cd demo，进入 demo 文件夹，然后使用命令 npm run serve 启动项目，端口默认8080：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412095453597-1855659754.png">
3.在浏览器中访问 http://localhost:8080/ ，可以看到本地运行的 Vue 项目：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412100751856-634459072.png">
4.在 demo 文件夹中运行 cmd，使用命令 express --view=ejs server 创建 node.js 项目 server：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412100924631-365524687.png">
5.创建完成之后，按照提示，使用命令 cd server 进入 server 文件夹，使用命令 npm install 安装所需依赖，使用 npm start 启动项目，默认端口3000：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412101255375-2131840087.png">
6.在浏览器访问 http://localhost:3000/，可以看到本地运行的 Node.js 服务器项目：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412102207078-1318275735.png">
7.用编辑器打开Vue项目demo，打开 server 文件夹下 routes 文件夹下的 index.js 文件，添加一个路由，返回结果为一个json对象：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412102750053-1122819399.png">
8.在终端中重启 Node.js 项目 server，然后在浏览器中访问 http://localhost:3000/person，可以看到请求成功后的返回结果
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412103502057-1857497564.png">
9.使用命令 npm install axios 为Vue项目安装用来做异步请求的 axios，然后在 main.js 中引入并绑定到Vue的原型上：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412105000764-426726338.png">
10.在Vue项目的 App.vue 文件中添加生命周期 mounted 的钩子函数，用 axios 发起 get 请求，请求接口为 api/person。此时如果重启Vue项目，在控制台中能看到请求结果404 (Not Found)
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412105311960-799541474.png">
11.在Vue项目根目录下新建 vue.config.js，内容如下:
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412110804832-1144821562.png">
12.重启Vue项目，打开控制台，可以看到请求到的数据：
<img src="https://img2020.cnblogs.com/blog/1641227/202004/1641227-20200412110702400-2126786742.png">
  
来源：https://www.cnblogs.com/duoge/p/12684410.html

頁: [1]

琼殿技术论坛's Archiver

本地Vue项目跨域请求本地Node.js服务器的配置方法