node服务器放vue项目,本地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项目，打开控制台，可以看到请求到的数据：

node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法相关推荐

vue如何配置服务器端跨域_vue项目里如何配置本地代理实现跨域请求
1.在如图项目配置的index.js文件夹下添加以下一段话微信图片_20180912182204.png proxyTable: { '/rest': { target: 'http://192.1 ...
Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题...
webservice 代码 1 /// <summary> 2 /// MESService 的摘要说明 3 /// </summary> 4 [WebService(Name ...
服务器为C#开发，aspx设置跨域请求
aspx设置跨域请求最近想用hbuilder把项目转成app,要请求之前的服务器,所以遇到个跨域问题,查了很多资料终于搞定了... 在服务器aspx页面头文件里加: <meta http-eq ...
服务器安全：浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括浏览器同源策略与跨域请求 XSS攻击原理及防御策略如何使用SpringSecurity防御CSRF攻击 CC/DDOS攻击与流量攻击什么是SSL TLS HTTPS? 一.浏览器的同源策 ...
Node.js设置CORS跨域请求中多域名白名单的方法
允许跨域请求,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名. 最常见的设置是: res.header('Access-C ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
vue跨域请求(举例子细说）
文章目录 1.实现axios(如果懂请跳过) 2. 跨域请求 2.1 跨域例子 2.2 举例说明 1.实现axios(如果懂请跳过) 安装 npm install --save axios vue-a ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...

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

node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法相关推荐

最新文章

热门文章