VueJs 将接口用webpack代理到本地的方法

上一篇博文，我们已经顺利的从cnodejs.org请求到了数据，但是大家可以注意到我们的/src/api/index.js的第一句就是：

// 配置API接口地址

var root = 'https://cnodejs.org/api/v1'

这里我们的接口地址是写死的，这固然是一个问题，但是其实并不是最重要的，而是在cnodejs.org已经帮我们把接口处理的很好了，帮我们解决了跨域问题。而在实际开发中，很多项目接口是不允许我们跨域请求的。

而在第一章说到的前后端分离开发模式，前端开发前端，同时后端也在开发接口，那这个时候我们前端工程师不可能到服务器上直接开发，或者在本地搞一套服务器环境，如果是这样就违背了我们前后端分离开发的初衷。

那么如何解决这个问题呢？其实很简单，要知道 跨域不是接口的限制 而是浏览器为了保障数据安全做的限制。因此，一种方法可以解决，那就是打开浏览器的限制，让我们可以顺利的进行开发。但是无奈的是，最新的 chrome 浏览器好像已经关闭了这个选项，那么我们只能采用另外一种方法了——将接口代理到本地。

配置 webpack 将接口代理到本地

好在，vue-cli 脚手架工具，已经充分的考虑了这个问题，我们只要进行简单的设置，就可以实现我们的目的。

我们打开 /config/index.js 文件，找到以下代码：

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

// Use Eslint Loader?

// If true, your code will be linted during bundling and

// linting errors and warnings will be shown in the console.

useEslint: true,

// If true, eslint errors and warnings will also be shown in the error overlay

// in the browser.

showEslintErrorsInOverlay: false

其中，proxyTable: {}, 这一行，就是给我们配置代理的。根据 cnodejs.org 的接口，我们把这里调整为：

proxyTable: {

  '/api/v1/**': {

    target: 'https://cnodejs.org', // 你接口的域名

    secure: false,

    changeOrigin: false,

  }

}

我们这样配置好后，就可以将接口代理到本地了。

更多关于接口的配置请参见：https://github.com/chimurai/http-proxy-middleware#options

更多关于webpack 接口配置请参见：https://webpack.js.org/configuration/dev-server/#devserver-proxy

重新配置 src/api/index.js 文件

在上面我们的代理已经配置好了，但是我们的/src/api/index.js还需要调用人家的地址，所以我们来重新配置/src/api/index.js文件，如下

// 配置API接口地址

var root = '/api/v1'

跨域问题一般仅存在于开发环境上，到实际生产环境上一般不存在跨域问题了，所以采用这种方式来进行配置，能很好的解决跨域问题。值得注意的是，配置完代理后是不会立即生效的，需要重启服务器。

我们按Ctrl+c先停掉服务，然后再用cnpm run dev重启服务即可。

cnpm run dev

重启完成后，打开浏览器，在F12开发者工具里，可以看到如下：

可以看到我们请求的接口地址已经变成了localhost也就是本机，说明我们的接口已经成功的代理到本地了。再切换到Priview选项卡来看一下数据是否正常返回：

如果出现上图，则说明数据也正常的返回了，这样我们已经顺利的将接口代理到了本地，并且读取到了数据。开始准备下面的工作吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • 详解如何使用webpack打包Vue工程

    详解如何使用webpack打包Vue工程

    使用webpack打包Vue工程 前言 入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了.感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现.大神们疯狂的造轮子,玩的不亦乐乎.我等小白们,疯狂追赶,学的心肝脾肺都快衰竭.而我的精力也仅限浅尝辄止,但是学多一点总有好处的.本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期 支持限定开始和结束日期范围选择. 支持小时分钟 需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo

  • VueJs 将接口用webpack代理到本地的方法

    VueJs 将接口用webpack代理到本地的方法

    上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是: // 配置API接口地址 var root = 'https://cnodejs.org/api/v1' 这里我们的接口地址是写死的,这固然是一个问题,但是其实并不是最重要的,而是在cnodejs.org已经帮我们把接口处理的很好了,帮我们解决了跨域问题.而在实际开发中,很多项目接口是不允许我们跨域请求的. 而在第一章说到的前后端分离开发模式,前端开发前端,同

  • 详解Java是如何通过接口来创建代理并进行http请求

    场景 现在想要做这么一个事情,公司的dubbo服务都是内网的,但是提供了一个对外的出口,通过链接就能请求到对应的dubbo服务.(具体怎么做的应该就是个网关,然后将http请求转为dubbo请求,通过泛化调用去进行调用.代码看不到.)现在为了方便测试,我需要将配置的接口,通过http请求去请求对应的链接. 分析 项目的思想其实跟mybatis-spring整合包的思想差不多,都是生成代理去执行接口方法. https://www.jb51.net/article/153378.htm 项目是个简单

  • Java使用代理进行网络连接方法示例

    需求是这样的: 一.界面上要有这样几种代理类型可以选. 1.HTTP代理 2.Socks代理 3.不使用代理(直连) 4.使用浏览器设置(浏览器也是HTTP.Socks.直连三种). 可参考QQ登录设置里的代理能,其实跟qq的代理功能是一样的. 二.测试使用所填写的代理配置信息是否可连接 三.记录用户上次选择的代理配置,默认使用用户上次使用的代理配置进行网络连接. 程序运行环境是WindowsXP.Windows7.Windows8系统. 使用的技术为Java7,Swing,CXF. 难点: 1

  • java实现文件保存到本地的方法

    本篇介绍了java实现文件保存到本地的方法,具体代码如下: private void savePic(InputStream inputStream, String fileName) { OutputStream os = null; try { String path = "D:\\testFile\\"; // 2.保存到临时文件 // 1K的数据缓冲 byte[] bs = new byte[1024]; // 读取到的数据长度 int len; // 输出的文件流保存到本地文

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • 修改vue+webpack run build的路径方法

    vue项目用webpack打包想要修改静态资源路径等,找到项目根目录下的config文件夹,打开该文件夹下的index.js文件,默认如下: // see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname

  • vue webpack重写cookie路径的方法

    webpack提供的反向代理服务器在开发阶段非常方便,几行简单的代码配置就可以使用反向代理功能,包括路径重写.cookie处理等. 项目开发阶段使用的API路径是 /admin ,部署到线上是 / ,所以在开发过程中需要在 proxyTable 进行反向代理配置,将路径重写掉,路径重写代码如下( config/index.js ): proxyTable: { '/admin': { target: 'http://127.0.0.1:8080', changeOrigin: true, pat

  • nginx反向代理二级域名绑定方法及注意事项

    摘要 本文介绍了利用nginx实现多域名和多站点的绑定的方法及相关注意事项.您也可以只看标题或红色标注部分.☺ 1.应用场景 我们经常会遇到在同一台服务器建立多个Web站点的情况,普遍的做法是为不同的站点配置不同的端口,这样就可以用IP:Port的形式访问. 但是用IP访问毕竟不方便,不生动,不容易记忆.那么,我们可以给每个站点绑定不同的域名.(在这里我们仅谈公网情况)即使我们只有一个域名,我们可以设置多个二级域名,使用Nginx很容易实现. 2.基本要求 通常,网上教程会直接贴一段配置文件的代

  • Python爬虫代理池搭建的方法步骤

    一.为什么要搭建爬虫代理池 在众多的网站防爬措施中,有一种是根据ip的访问频率进行限制,即在某一时间段内,当某个ip的访问次数达到一定的阀值时,该ip就会被拉黑.在一段时间内禁止访问. 应对的方法有两种: 1. 降低爬虫的爬取频率,避免IP被限制访问,缺点显而易见:会大大降低爬取的效率. 2. 搭建一个IP代理池,使用不同的IP轮流进行爬取. 二.搭建思路 1.从代理网站(如:西刺代理.快代理.云代理.无忧代理)爬取代理IP: 2.验证代理IP的可用性(使用代理IP去请求指定URL,根据响应验证

  • Node中使用http-proxy-middleware实现代理跨域的方法步骤

    目录 1.安装代理模块 2.配置代理 1.安装代理模块 cnpm i http-proxy-middleware -S 2.配置代理 const express = require('express'); const app = express(); /* 代理配置 start */ const proxy = require('http-proxy-middleware'); //引入代理模块 const proxyOptions = { target: 'http://127.0.0.1:9

随机推荐