详解vue-cli项目开发/生产环境代理实现跨域请求


Posted in Javascript onJuly 23, 2019

开发环境中跨域

使用vue-cli创建的项目,开发地址是localhost:8080,需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过vue-cli创建的项目,可以直接利用node.js代理服务器,通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

dev: {
  assetsSubDirectory: 'static', //静态资源根目录的子目录static,也就是dist目录下面的static
  assetsPublicPath: '/', //编译发布的根目录,可配置为资源服务器域名或 CDN 域名
  proxyTable: {}, //proxyTable 代理的接口(可跨域)
  host: 'localhost', 
  port: 8080, //dev-server的端口号,可以自行更改
  autoOpenBrowser: false, //是否自动打开浏览器
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, 
  useEslint: true,
  showEslintErrorsInOverlay: false,
  devtool: 'cheap-module-eval-source-map',
  cacheBusting: true,
  cssSourceMap: true //默认情况下,关闭 CSS Sourcemaps,因为使用相对路径会报错
 },

只要修改里面的proxyTable: {}

proxyTable: {
 '/cms': { //代理地址
  target: 'http://192.168.0.112:8080', //需要代理的地址
  changeOrigin: true, //是否跨域
  secure: false,
  pathRewrite: {
   '^/cms': '/cms' //本身的接口地址没有'/cms' 这种通用前缀,所以要rewrite,如果本身有则去掉(/cms等价于 www.xxx.com/cms)
  }
 }
},

然后重启项目npm run dev,请求数据时URL前加上“/cms”就可以跨域请求了

this.$axios.get('/cms/queryMaterial', {params: params}) 
  .then((res) => { 
  console.log(res); 
}).catch((err) => { 
  console.log(err); 
})

访问接口若没有安装axios,则需要进行安装

1)安装:npm install axios --save-dev

2)main.js中导入
 import axios from 'axios'; //引入axios进行地址访问
 Vue.prototype.$axios = axios;(注意:不使用use来使用该例,而是用prototype原型来使用)

1、参数proxyTable详解:

vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是www.xxx.com/list/1,可以按照如下设置:

proxyTable: {
 '/list': {
  target: 'http://www.xxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

这样我们在写url的时候,只用写成/list/1就可以代表www.xxx.com/list/1

那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
 '/list': {
  target: 'http://www.xxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

2、pathRewrite含义

用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。'/list': {}, 就是告诉node,我接口只要是'/list'开头的才用代理。所以你的接口就要这么写 /list/xx/xx,最后代理的路径就是 http://xxx.xx.com/list/xx/xx。可是不对啊,我正确的接口路径里面没有/list啊,所以就需要 pathRewrite,用'^/list':'', 把'/list'去掉,这样既能有正确标识,又能在请求接口的时候去掉list。当然如果本身的接口中就有/list,那么就可以把pathRewrite这个参数去掉。

生产环境中跨域

1)设置nginx配置文件:

server {
  ...
  location /cms{
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://192.168.0.112:8080/cms;
  }
  ...
}

2)java后端配置跨域

if (method.equals("OPTIONS")) {
   response.setHeader("Access-Control-Allow-Headers", "accept, content-type");
   response.setHeader("Access-Control-Allow-Method", "POST");
 }
 response.setHeader("Access-Control-Allow-Origin", "*");

设置不同的接口地址

平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。
在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。

1、设置不同的接口地址

先找到以下文件/config/dev.env.js,/config/prod.env.js,可以看到dev.env.js里面内容如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'
})

这是开发环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.0.112:8080"'
})

然后找到prod.env.js文件,如下:

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

2、在代码中调用设置好的参数:

比如我在本项目中重新封装axios(api文件在/src/axios/request.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:process.env.API_ROOT

详解vue-cli项目开发/生产环境代理实现跨域请求

最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
简单的js表格操作
Sep 24 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
javascript的this关键字详解
May 20 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 #Javascript
微信小程序 网络通信实现详解
Jul 23 #Javascript
微信小程序 确认框的实现(附代码)
Jul 23 #Javascript
koa2 从入门到精通(小结)
Jul 23 #Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 #Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 #Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python生成验证码实例
2014/08/21 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python实现视频分帧效果
2019/05/31 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
护理学毕业生求职信
2013/11/14 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
婚礼主持结束词
2014/03/13 职场文书
精神文明建设标语
2014/06/16 职场文书
加强作风建设心得体会
2014/10/22 职场文书
护士先进个人总结
2015/02/13 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python