axios请求mysql_接收post请求(vue+axios)解决跨域问题(三)
1.通过postman测试post请求
新建一个接收post的路由
//根据post的id查询
var selId='select * from list where id=?'
//响应post
router.post('/list', function(req, res, next) {
var id=req.body.id; //通过req的body拿到post的id
pool.getConnection(function(err,suc){
suc.query(selId,[id],function(err,result){
if(result){ //数据库有返回数据
result={ //返回数据与格式
code:200,
msg:'获取单个测试列表成功',
data:result
}
}
res.json(result); //响应返回json数据
suc.release(); //关闭数据库连接
})
})
});
测试结果
id为1的数据
id为2的数据
2.Vue(axios发送post请求)
安装axios&element-ui
cnpm install axios --save //是一个基于 promise 的 HTTP 库
cnpm install element-ui --save //饿了么前端出品的一套 Vue.js 后台组件库
打开main.js引入
//element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//axios
import axios from 'axios'
axios.defaults.baseURL='http://localhost:3000'; //设置一个类似base_url的请求路径
global.axios=axios; //设置一个全局axios便于调用
打开helloword.vue
//html部分
:data="userList"
border>
fixed
prop="Id"
label="用户ID">
prop="u_name"
label="姓名">
prop="u_phone"
label="电话">
//script部分
data(){
return{userList:[]} //用于接收返回数据
},
mounted(){
this.get()
},
methods:{
get(){
var this_=this;
//调用最开始写的那个接口,拉取全部数据
axios.post('/users/list',{id:1}).then(function(res){
this_.userList=res.data.data
}).catch(function(err){
console.log(err)
}) }, }
测试是否成功连接:
打开mysql
运行node服务 npm start
运行vue npm run dev
发现并没有拿到数据,查看控制台报错信息
报错信息
node服务运行在localhost:3000端口,vue运行在localhost:8080端口
解决方法是在node中配置cors解决不同端口的跨域问题
安装cors
cnpm install cors --save
在app.js中引入cors并配置
//cors
var cors=require('cors');
app.use(cors({
origin:['http://localhost:8080'], //指定接收的地址
methods:['GET','POST'], //指定接收的请求类型
alloweHeaders:['Content-Type','Authorization'] //指定header
}))
配置完成后重启node服务 打开vue,看到数据已经成功拿到
获取指定数据成功
对数据进行一些基本操作(四)
axios请求mysql_接收post请求(vue+axios)解决跨域问题(三)相关推荐
- vue脚手架解决跨域
vue脚手架解决跨域 1.什么是跨域 1.浏览器,端口,域名只要有一项不同就会产生跨域,协议域名端口都相同才同域,否则都是跨域 2.如何解决跨域 1.首先在vue脚手架的根目录下创建一个vue.con ...
- vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理 参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
- vue porxy 解决跨域
porxy // 配置文件vue.config.js 是固定名 // 必须放在项目根目录下,与src同级别 module.exports = {//devServer:开发服务器配置项devServe ...
- vue cli 解决跨域 线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
- vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...
- 【vue】解决跨域问题的原理
vue中的proxy主要作用类似于nginx: 将本地请求转发给跟随vue项目启动的本地服务: 然后由服务端去请求远程服务端:因为服务端请求服务端是没有跨域问题的: 而本地服务和本地H5资源,因为同源 ...
- vue cli3解决跨域的两种方法
请去下面网站非常清晰:https://www.jianshu.com/p/eb3de95cfc82
- 解决Vue前后端跨域问题的多种方式
1 前言 本文主要介绍借助解决Vue前后端跨域问题的几种方式 说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
- axios请求接口http_Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
最新文章
- 转:探讨SQL Server 2005的安全策略
- tsne pca 自编码器 绘图(CC2)——一定记得做无量纲化处理使用standardscaler,数据聚类更明显...
- 大数据项目产品选型的五个建议
- APP功能需求第一版
- 算法学习-求两个整数的最大公约数
- 写号是什么意思_内涵段子暗号馒头是什么意思 该怎么接回答对话大全
- C# 调用人脸识别 虹软ArcFace2.0实例
- android传感器开发与智能设备案例实战_【我的物联网成长记2】设备如何进行选型?...
- mac android 调试快捷键,Mac Android Studio快捷键整理_IOS_脚本之家
- 将STM32 Flash的一部分虚拟为大容量存储设备 USB_Device
- 新人成长:实习一个月感悟
- 高中OJ3837. 【NOIP2014模拟9.14】心灵终结
- 音频节奏检测(Onset Detection)
- HEVC解码器HM源码阅读(三)读取一个NALU
- 两个实打实干活的同事离职了,老板连谈都没谈,一句挽留都没有,你怎么看
- opencv常用函数,QT中Mat与QImage的转换
- 车辆路径优化matlab代码,5个求解车辆路径问题(VRP)的MATLAB算法
- 第六十二周总结——天降大任于斯人也
- 旋转机械振动的基本特性分析
- 解锁Mac上压缩解压缩的知识点