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.validate的使用说明介绍
Nov 12 Javascript
YUI模块开发原理详解
Nov 18 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
老生常谈angularjs中的$state.go
Apr 24 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写的小东西
2006/12/06 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
如何使用php输出时间格式
2013/08/31 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
python3编写C/S网络程序实例教程
2014/08/25 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python可以用来做什么
2020/11/23 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
车工岗位职责
2013/11/26 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
应届生求职信范文
2014/06/30 职场文书
违反交通法规检讨书
2014/09/10 职场文书
介绍信的写法
2015/01/31 职场文书
自我评价优缺点范文
2015/03/11 职场文书
杨善洲电影观后感
2015/06/04 职场文书
就业证明函
2015/06/17 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
python小程序之飘落的银杏
2021/04/17 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript