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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
JS实现日期加减的方法
2013/11/29 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
vue组件实例解析
2017/01/10 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python sorted对list和dict排序
2020/06/09 Python
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
中国文明网签名寄语
2014/01/18 职场文书
村创先争优活动总结
2014/08/28 职场文书
学籍证明模板
2015/06/18 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
jquery插件实现图片悬浮
2021/04/16 jQuery
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电