前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题。我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间精力。所以再搭个项目从头走一遍,不敢说是教程,仅作记录。

说明:本文项目基于 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服务器的配置方法的更多相关文章

  1. 本地vue项目跨域服务器接口

    1,打开index.js文件,找到  proxyTable 参照下面链接的方法,你们可以去点赞 https://www.douban.com/note/704314260/?type=like#sep

  2. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  3. Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题

        webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...

  4. Vue-cli 创建的项目配置跨域请求(通过反向代理)---配置多个代理--axios请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问 localhost:9000 或https://m.maoyan.com或http://image.b ...

  5. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  6. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  7. vue-cli3.0本地代理cookie跨域请求Nginx配置

    由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Ngi ...

  8. vue项目跨域问题

    跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...

  9. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

随机推荐

  1. flask 分页数据显示

    填充一些数据在表中 @blue.route('/pages/') def pages(): # 默认进入这个视图函数 第一页并只显示5条数据 page = request.args.get('page ...

  2. web测试喜事连连--草稿箱功能

    “草稿箱”功能很常见吧,编辑内容后,不想发布的话,就先存为草稿.啥时候想公开了,发布即可. 今天发生个啥事呢,让作为Tester的我,哭笑不得. 开发部经理老F,反馈一个客户需求,发到群里让大家讨论. ...

  3. 浅谈Java中静态代码块和非静态代码块

    静态代码块: static{} 执行优先级高于非静态的初始化块,它会在类初始化(类初始化这个问题改天再详细讨论)的时候执行一次,执行完成便销毁,它仅能初始化类变量,即static修饰的数据成员. 非静 ...

  4. docker的安装,自己写了一个安装docker的脚本,辅助做docker安装的实验(ubuntu)

    #!/bin/bash #获取用户名 [ pwd == '/root' ] && hn="root@$(hostname):~#" || hn="root ...

  5. 利用border-radius画椭圆

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Java安装和配置

    一. Java安装和配置 1.JDK下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...

  7. 01.UNIX基础知识

    1.UNIX体系结构 什么叫做内核? 内核是一种软件,它控制计算机硬件资源,并提供程序的运行环境. 什么叫操作系统? 在广义上,操作系统包括了内核和一些其他软件,这些软件使得计算机能够发挥作用,如可以 ...

  8. Linux 中useradd命令的使用

    Linux 系统中通常都是root用户具有超级权限,超级用户root一般是不需要创建的,然而很多时候root用户不是任何人都可以使用的,毕竟最高权限的用户,任意使用的话,会对系统造成很多不必要的破坏. ...

  9. 读源码 - stagesepx

    目录 背景 一.概述 stagesepx 二.源码中优雅的用法 优雅的赋值/返回 递归方法新建多级目录 更简洁的日志输出 格式化输出的另一种姿势 基于生成器读取多个文件 sorted进阶 入参类型限制 ...

  10. Natas21 Writeup(共用session、session注入)

    Natas21: 第一个网页 第二个网页 提示http://natas21.natas.labs.overthewire.org/页面和http://natas21-experimenter.nata ...