vue + node 前后端分离项目解决跨域问题

由于前端 和 后端 项目运行于不同端口,无法直接传递数据

后端

app.js

添加如下代码

var cors = require('cors')
app.use(cors())

其中 cors需要单独安装

npm install cors

前端

main.js

添加如下代码

import axios from 'axios'
// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:3000'
// 将配置挂载
app.config.globalProperties.$http = axios

App.vue

请求页面

async onSubmit() {
// 请求时直接请求相对路径
let {data: res} = await this.$http.get('/')
console.log(res)
}

vue + node 前后端分离项目解决跨域问题的更多相关文章

  1. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  2. Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...

  3. 前后端分离djangorestframework——解决跨域请求

    跨域 什么是跨域 比如一个链接:http://www.baidu.com(端口默认是80端口), 如果再来一个链接是这样:http://api.baidu.com,这个就算是跨域了(因为域名不同) 再 ...

  4. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  5. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  6. 基于Vue的前后端分离项目实践

    一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...

  7. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  8. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  9. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  10. 前后端分离crud(跨域问题)讲解

    1 前后端分离 1.1 后端 ssm+maven 多模块 swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511. ...

随机推荐

  1. Android 项目移植后运行黑屏

    在做Android项目的移植过程中,即把名为a的代码和样式全部复制到b项目后,只是对a项目内多余代码删除和修改包名,最后替换完后,点击=>运行,运行成功,但是演示机显示黑屏,看log也没有报错. ...

  2. c++算法之动态规划:01背包

    什么是动态规划? 动态规划算法(dynamic programing),是一种由递推为基础的比贪心更稳定的一种优化策略,为运筹学的一部分.就是通过以递推为基础的手段非暴力求出最值. 它的总体思想其实就 ...

  3. 5、Mybatis之获取参数值

    5.1.创建新module 5.1.1.右击SSM文件夹,创建新module 5.1.2.选择maven 5.1.3.配置module名称和路径 5.1.4.module初始状态 5.1.5.复制打包 ...

  4. Go 并发编程 - runtime 协程调度(三)

    Go Runtime Go runtime 可以形象的理解为 Go 程序运行时的环境,类似于 JVM.不同于 JVM 的是,Go 的 runtime 与业务程序直接打包在一块,是一个可执行文件,直接运 ...

  5. Golang日志新选择:slog

    go1.21中,slog这一被Go语言团队精心设计的结构化日志包正式落地,本文将带领读者上手slog,体会其与传统log的差异. WHY 在日志处理上,我们从前使用的log包缺乏结构化的输出,导致信息 ...

  6. Go语言中JSON的反序列化规则

    Unmarshal 解析 func Unmarshal(data []byte, v any) error Unmarshal 解析 JSON 编码的数据,并将结果存储在 v 指向的值中.如果 v 为 ...

  7. 记录 Ucharts 的使用

    1.开启 2d 渲染 线上运行开启 canvas2d 可以解决图表显示问题 <qiun-data-charts canvas2d .../> canvasId 可以不传,官方内置生成随机字 ...

  8. 超星读书下载的pdz文件如何转为pdf文件详细教程(亲测有效)

    前言: 你还在为超星读书下载的pdz格式书籍而烦恼吗?还在为不知道怎么将pdz格式转为pdf格式而气愤吗?请看以下教程. 流程: 使用超星阅读器将pdz文件转换为.xps或.oxps文件 利用第三方软 ...

  9. Mach-O Inside: 命令行工具集 otool objdump od 与 dwarfdump

    1 otool otool 命令行工具用来查看 Mach-O 文件的结构. 1.1 查看文件头 otool -h -v 文件路径 -h选项表明查看 Mach-O 文件头. -v 选项表明将展示的内容进 ...

  10. vue本地能够访问图片,打包项目之后图片无法访问

    //template中 <img :src="boxHerf" /> //js let boxHerf = ref('/src/assets/images/contai ...