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. SQL 注入学习手册【笔记】

    SQL 注入基础 [若本文有问题请指正] 有回显 回显正常 基本步骤 1. 判断注入类型 数字型 or 字符型 数字型[示例]:?id=1 字符型[示例]:?id=1' 这也是在尝试闭合原来的 sql ...

  2. Ubuntu关机卡死解决办法

    sync && sudo syncsudo shutdwon -h now

  3. Azure Storage 系列(八)存储类型细化分类说明

    一,引言 Azure 存储账户功能经过官方改进迭代后,在创建的时候,存储账户的类型被分为两大类: 1)general-purpose v2 account(标准常规用途v2) Blob 存储,队列存储 ...

  4. 推荐一个react脚手架工具

    今天介绍一个react脚手架,react-cli, 可以说是 vue-cli 的外表,react的心! 安装步骤: npm install -g sao sao yang302/react-cli n ...

  5. window操作系统安装多个版本nodejs版本-控制工具nvm

    参考: https://blog.csdn.net/m0_38134431/article/details/118388297 https://juejin.cn/post/7044890876631 ...

  6. 算法2:寻找吸血鬼数(JS)

    任务二:寻找吸血鬼数 打印所有4位吸血鬼数和它们的獠牙   提示:一共有7个: 吸血鬼数: -该鬼的位数为偶数: -该数的所有位中.是0的位少一半: -该数每一位上的数字重新组合为两个位数相等的数,乘 ...

  7. HDU1702 ACboy needs your help again! 题解

    #include <iostream> #include <string> #include <queue> #include <stack> usin ...

  8. aspnetcore微服务之间grpc通信,无proto文件

    aspnetcore微服务之间通信grpc,一般服务对外接口用restful架构,HTTP请求,服务之间的通信grpc多走内网. 以前写过一篇grpc和web前端之间的通讯,代码如下: exercis ...

  9. 前端CodeReivew实践

    把Code Review变成一种开发文化而不仅仅是一种制度 把Code Review 作为开发流程的必选项后,不代表Code Review这件事就可以执行的很好,因为Code Review 的执行,很 ...

  10. keepalived部署+nginx高可用

    nginx+keepalived搞性能web网络架构实战配置: 环境准备: keepalived+nginx-1: 192.168.1.23 keepalived+nginx-2: 192.168.1 ...