详解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 写类方式之一
Jul 05 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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
php计算十二星座的函数代码
2012/08/21 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
composer.lock文件的作用
2016/02/03 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的默认参数详解
2015/06/24 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
大学生求职自我评价
2014/01/16 职场文书
会议活动邀请函
2014/01/27 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers