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

用户留言