Vue前后端不同端口的实现方法
网络编程 2021-07-04 16:46www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇Vue前后端不同端口的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
前端Vue 8080端口,后端Node.js 8085端口 主要记录下前后端不同端口遇到的问题
1、写服务器端程序,我的在(node_proxy/index.js)下
app.all('*', function (req, res, next) { res.header('Aess-Control-Allow-Origin', req.headers.origin || '*'); res.header('Aess-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Aept,X-Requested-With'); res.header('Aess-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Aess-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 'Aess-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前后端不同端口的实现方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程