Vue前后端不同端口的实现方法


Posted in Javascript onSeptember 19, 2018

前端Vue 8080端口,后端Node.js 8085端口 主要记录下前后端不同端口遇到的问题

1、写服务器端程序,我的在(node_proxy/index.js)下

app.all('*', function (req, res, next) {
 res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
 res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
 res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
 res.header('Access-Control-Allow-Credentials', true);
 res.header('X-Powered-By', ' 3.2.1');
 res.header('Content-Type', 'application/json;charset=utf-8');
 if (req.method === 'OPTIONS') {
 res.sendStatus(200);
 } else {
 next();
 }
});

这段代码很重要,要是没有的话会出现 No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。

2、在前端用axios写get请求处理程序,写在了Card模板下

mounted(){
 axios.get(HOST)
 .then(response => {
 this.sed = response.data.data;
 })
 }

3、在config/index.js下配置proxyTable:

proxyTable: {
 '/seller': {
 target: 'http://localhost:8085',
 changeOrigin: true,
 pathRewrite: {
  '^/seller': '/seller'
 }
 }
 },

4、分别启动前后端,OK~\(???)/~啦啦啦~

以上这篇Vue前后端不同端口的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 #Javascript
浅谈React之状态(State)
Sep 19 #Javascript
jQuery使用each遍历循环的方法
Sep 19 #jQuery
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 #Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 #Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 #Javascript
vue.extend与vue.component的区别和联系
Sep 19 #Javascript
You might like
与文件上传有关的php配置参数总结
2013/06/14 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
PHP 实现缩略图
2021/03/09 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
《太阳》教学反思
2014/02/21 职场文书
理想演讲稿范文
2014/05/21 职场文书
增员口号大全
2014/06/18 职场文书
人事任命通知书
2015/04/21 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
使用pytorch实现线性回归
2021/04/11 Python