本地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,内容如下:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', //node.js服务器运行的地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': 'http://localhost:3000' //路径重写
}
},
}
}
}
12.重启Vue项目,打开控制台,可以看到请求到的数据:
本地Vue项目跨域请求本地Node.js服务器的配置方法的更多相关文章
- 本地vue项目跨域服务器接口
1,打开index.js文件,找到 proxyTable 参照下面链接的方法,你们可以去点赞 https://www.douban.com/note/704314260/?type=like#sep
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题
webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...
- Vue-cli 创建的项目配置跨域请求(通过反向代理)---配置多个代理--axios请求
问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问 localhost:9000 或https://m.maoyan.com或http://image.b ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- vue-cli3.0本地代理cookie跨域请求Nginx配置
由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Ngi ...
- vue项目跨域问题
跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...
- vue axios跨域请求,apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
随机推荐
- MySQL字符集不一致导致性能下降25%,你敢信?
故事是这样的: 我在对MySQL进行性能测试时,发现CPU使用率接近100%,其中80%us, 16%sys,3%wa,iostat发现磁盘iops2000以下,avgqu-sz不超过3,%util最 ...
- [转载]Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论
Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论 转载至:https://www.sdnlab.com/17530.html 我们使用Linux作为服务器操作系统时,为了达到高并发处理 ...
- C++ 文件操作 FILE*
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> //编程题:往文件里写入字母表的26个字母. //要求:如果字母对应编码值 是奇数则写 ...
- Python 执行 javascript PyExecJS 模块
PyExecJS 安装 pip install PyExecJS PyExecJS 的基本使用: >>> import execjs >>> execjs.eval ...
- PDIUSBD12管脚简述
PDIUSBD12管脚简述 PDIUSBD12管脚及简述 PDIUSBD12读写时序图 CS_N是片选信号,当片选信号位低电平时,下面的操作才有效.由于板子上将CS_N接地,所以它一 ...
- 1分钟,带你上手“Markdown”语法
前言 Markdown 是一种轻量级的标记语言,有 John Gruber 以及Aaron Hillel Swartz 一起编写.Aaron Hillel Swartz 是一个极富传奇的黑客,有兴趣可 ...
- go例子(二) 使用go语言实现数独游戏
例子托管于github example.go package main import ( "./sudoku" ) func main() { //var smap ...
- ASP.NET MVC5实现芒果分销后台管理系统(一):系统结构设计,集成AutoMapper,Log4net
在构思完系统思维脑图后,小墨回到家中,便摩拳擦掌开始了开发工作.要想迅速完成系统开发,前期系统设计和准备尤其重要,因为小墨做过太多大大小小的业务系统,准备工作也是十分顺利. 系统结构 整个系统工程结构 ...
- Airtest,Poco,Unity自动化测试集成
作为一个Game Developer,测试部分是必不可少,程序完成需求首先要进行S0相关的测试,这样确保交付到策划验收和QA验收时是没有阻断性的bug或者显而易见代码缺陷.那么如何去做测试用例呢?肯定 ...
- Java高效编程:总结分享
参考资料:慕课网:Java高效编程收费实战课程.博客园.CSDN.菜鸟教程以及其他文档. 篇幅受限,不太想针对每个点都写篇博客,有的地方可能写的不是很详细,一笔带过了.如果你觉得那个点在项目中用得上可 ...