脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue前后端不同端口

Vue前后端不同端口的实现方法

 更新时间：2018年09月19日 14:55:03   作者：Simpleelegant  
今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

前端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中forEach循环的使用讲解

    vue中forEach循环的使用讲解

    这篇文章主要介绍了vue中forEach循环的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue实现日历备忘录功能

    vue实现日历备忘录功能

    这篇文章主要为大家详细介绍了vue实现日历备忘录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • vue cesium加载点与定位到指定位置的实现方法

    vue cesium加载点与定位到指定位置的实现方法

    Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下
    2024-03-03
  • vue3中事件总线mitt代码实例(第三方库mitt)

    vue3中事件总线mitt代码实例(第三方库mitt)

    这篇文章主要给大家介绍了关于vue3中事件总线mitt(第三方库mitt)的相关资料,Mitt是一个在Vue.js应用程序中使用的小型事件总线库,该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props,需要的朋友可以参考下
    2023-09-09
  • vue如何使用element组件自定义v-loading

    vue如何使用element组件自定义v-loading

    这篇文章主要介绍了vue如何使用element组件自定义v-loading问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue2中使用less简易教程

    vue2中使用less简易教程

    这篇文章主要介绍了vue2中使用less简易教程，由于不需要手动配置webpack，所以vue中使用less是非常简单的，只需要安装less，less-loadder就ok了
    2018-03-03
  • 一步步讲解Vue如何启动项目

    一步步讲解Vue如何启动项目

    这篇文章主要给大家介绍了关于Vue如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 关于vue-router的beforeEach无限循环的问题解决

    关于vue-router的beforeEach无限循环的问题解决

    本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue+element实现表单校验功能

    vue+element实现表单校验功能

    这篇文章主要介绍了vue+element表单校验功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    这篇文章主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论