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. 集训后的一些wp

    新生赛后 0x01 2048(jk出发) 修改跳转条件为nop,随便动一下直接打印flag.这个场景我幻想过很久了,一直没做到,这次参考wp做出来了知道怎么做了.学到! 0x02 four(dsact ...

  2. 部署属于自己的New bing Ai

    该项目来源 https://github.com/adams549659584/go-proxy-bingai 项目体验地址 https://bing.vcanbb.top/web/#/ 项目介绍 基 ...

  3. vue3+vite2动态绑定图片优雅解决方案

    优雅解决方案在最下面,小伙伴们儿可以直接前往 背景 在vue3+vite2项目中,我们有时候想要动态绑定资源,比如像下面的代码这样: <template> <div> < ...

  4. Linux 内核设备驱动程序的IO寄存器访问 (下)

    Linux 内核设备驱动程序通过 devm_regmap_init_mmio() 等函数获得 struct regmap 结构对象,该对象包含可用于访问设备寄存器的全部信息,包括定义访问操作如何执行的 ...

  5. Gradle安装配置教程

    一.安装前检查 检查电脑上是否安装JDK,如果没有安装,请查看JDK安装教程:点击查看 如果电脑上已经安装JDK,按Win + R键,输入cmd,然后点击确定 输入java -version,点击回车 ...

  6. nmcli 命令设置网络

    nmcli 命令设置网络 设置静态 IP 地址 sudo nmcli connection modify "连接名称" ipv4.addresses IP地址/子网掩码 设置网关 ...

  7. 你知道Golang的模板怎么用吗?带你了解动态文本的生成!

    Golang Template Go语言中的Go Template是一种用于生成文本输出的简单而强大的模板引擎.它提供了一种灵活的方式来生成各种格式的文本,例如HTML.XML.JSON等. Go T ...

  8. 从DevOps实践落地的角度谈谈“流程”和“规范"的反模式

    最近在经历的一些事情,让我突发灵感,觉得要写点关于DevOps体系建设过程中的"流程规范",记录下来. 如何解读"流程规范" 谈到DevOps落地,无一例外都会 ...

  9. Springboot简单功能示例-5 使用JWT进行授权认证

    springboot-sample 介绍 springboot简单示例 跳转到发行版 查看发行版说明 软件架构(当前发行版使用) springboot hutool-all 非常好的常用java工具库 ...

  10. webgl centroid质心插值的一点理解

    质心插值说的是什么 2023.10.04再次review这个细节点: https://www.opengl.org/pipeline/article/vol003_6/ https://github. ...