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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
vue实现菜单切换功能
May 08 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP写日志的实现方法
2014/11/05 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
如何快速上手Vuex
2017/02/14 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
将python图片转为二进制文本的实例
2019/01/24 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
《长征》教学反思
2014/04/27 职场文书
个人校本研修方案
2014/05/26 职场文书
人事专员岗位说明书
2014/07/29 职场文书
政协调研汇报材料
2014/08/15 职场文书
投标承诺函格式
2015/01/21 职场文书
运动会广播稿50字
2015/08/19 职场文书
科级干部培训心得体会
2016/01/06 职场文书
师德培训心得体会2016
2016/01/09 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书