Vue前后端不同端口的实现方法
- 更新时间：2022-10-27 09:32:19
- 编辑：李正雅
前端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前后端不同端口的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。
相关教程
-
vue传参方式及router用法技巧
这篇文章主要介绍了vue的传参方式和router使用技巧,本文给大家列举了好几种传参方式，需要的朋友可以参考下
发布时间：2020-01-03
-
Vue实现平滑过渡的拖拽排序功能的实例代码
这篇文章主要介绍了vue实现平滑过渡的拖拽排序功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
发布时间：2020-01-29
-
vue interceptor 使用教程示例效果
本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下
发布时间：2020-01-19
-
vue不通过路由直接获取url中参数的方法示例
通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以
发布时间：2022-04-02
-
Vue.js父与子组件之间传参示例
给大家整理一篇关于Vue.js的教程，本篇文章主要介绍了Vue.js父与子组件之间传参示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2022-06-28
-
Vue2.x中的父组件传递数据至子组件的实例内容
这篇文章主要介绍了Vue2.x中的父组件数据传递至子组件的方法,需要的朋友可以参考下
发布时间：2020-05-28
-
Vue.js项目API、Router配置拆分实践
这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2019-12-07
-
实例详解vue拦截器Vue.http.interceptors.push
这篇文章主要为大家详细介绍了vue拦截器Vue.http.interceptors.push的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-01-09
-
vue axios中文文档知识点概述
本篇文章主要介绍了详解axios中文文档，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2019-11-12
