VUe3 @cli(axios)跨域访问

CompC的代码：

<template><div><button @click="sendAjax">发送ajax请求</button>//如果user有值就展示，没值就不展示，因为初次进来user没有值<div v-if="user"><p>姓名：{{user.name}}</p><p>介绍：{{user.bio}}</p><p>头像：<img :src="user.avatar_url" alt="" style="width:100px;height:100px"></p></div><button @click="sendGet">参数传递</button></div>
</template><script>//导入axios模块// import axios from 'axios'export default{data(){return{user:null}},methods:{// sendAjax(){//  // let p = axios.get('https://gitee.com/api/v5/users/tangyang8942')//    let p = this.$http.get('https://gitee.com/api/v5/users/tangyang8942')//  //请求成功之后//  .then(res =>{//相应对象//       console.log(res.data)//         this.user=res.data//   })//    //请求失败之后//  .catch(err => {//       console.log(err)//  })//    console.log(p)// }//服务器后台配置跨域访问//前台解决跨域访问sendGet(){this.$http.get('/api/toutiao/index',{params:{key:'b7cfd84383296b8284dc98ee70ac253e',type:'top'}}).then(res =>{console.log(res)}).catch(err =>{console.log(err)})}}}
</script><style lang="less">
</style>

vue.config.js

//导出内部的配置项
module.exports = {//这表示在测试服务器就是'http://localhost:8888/'，打包之后就是'http://localhost:8888//shop/'publicPath:process.env.NODE_ENV==='production' ? '/shop/' : '/',//项目访问基础url// publicPath:'/',//开发服务器的配置devServer:{port:8888,//在前端构建代理服务器，进行请求的转发，实现跨域访问//编辑vue.config.js.添加代理服务器配置，开发阶段有效proxy:{'/api':{  //所有以/api开头的请求都被代理转发target:'http://v.juhe.cn',  //转发目标服务器changeOrigin:true,  //是否需要䒓ws:true,    //启动websocket代理secure:false, //如果是https请求，则需要配置pathRewrite:{ //重写服务器地址，去掉/api'^/api':''},//输出日志logLevel:'debug'  //开启调试模式}}}
}

有一个小bug：

跨域访问，一般都在服务器段进行配置，前段的配置只是在开发阶段可以，具体配置：

//开发服务器的配置
   devServer:{
       port:8888,
       //在前端构建代理服务器，进行请求的转发，实现跨域访问
       //编辑vue.config.js.添加代理服务器配置，开发阶段有效
       proxy:{
           '/api':{ //所有以/api开头的请求都被代理转发
               target:'http://v.juhe.cn', //转发目标服务器
               changeOrigin:true, //是否需要䒓
               ws:true, //启动websocket代理
               secure:false, //如果是https请求，则需要配置
               pathRewrite:{ //重写服务器地址，去掉/api
                   '^/api':''
               },
               //输出日志
               logLevel:'debug' //开启调试模式
           }
       }
   }

Axios的具体的使用：

<template><div><!-- <button @click="sendAjax">发送ajax请求</button>//如果user有值就展示，没值就不展示，因为初次进来user没有值<div v-if="user"><p>姓名：{{user.name}}</p><p>介绍：{{user.bio}}</p><p>头像：<img :src="user.avatar_url" alt="" style="width:100px;height:100px"></p></div> --><button @click="sendGet">get方法</button><button @click="sendPsot">post方法</button><button @click="sendSimple">使用async和await简化axios的写法</button></div>
</template><script>//导入axios模块// import axios from 'axios'//可以把传递的字符串变换为对象import qs from 'qs'export default{data(){return{user:null}},methods:{// sendAjax(){//     // let p = axios.get('https://gitee.com/api/v5/users/tangyang8942')//    let p = this.$http.get('https://gitee.com/api/v5/users/tangyang8942')//  //请求成功之后//  .then(res =>{//相应对象//       console.log(res.data)//         this.user=res.data//   })//    //请求失败之后//  .catch(err => {//       console.log(err)//  })//    console.log(p)// }//服务器后台配置跨域访问//前台解决跨域访问sendGet(){this.$http.get('/api/toutiao/index',{params:{key:'b7cfd84383296b8284dc98ee70ac253e',type:'top'}}).then(res =>{console.log(res)}).catch(err =>{console.log(err)})},sendPsot(){this.$http.post('/api/toutiao/index',qs.stringify({key:'b7cfd84383296b8284dc98ee70ac253e',type:'top'})).then(res=>{console.log(res)}).catch(err =>{console.log(err)})},//直接拿到对应的结果,异步的写法转换为同步的写法async sendSimple(){const {data}=await this.$http.post('/api/toutiao/index',qs.stringify({key:'b7cfd84383296b8284dc98ee70ac253e',type:'top'}))console.log(data)}}}
</script><style lang="less">
</style>

VUe3 @cli(axios)跨域访问相关推荐

uni-app vue axios跨域访问问题
uni-app vue axios跨域访问问题为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法. main.js import axios from 'st ...
vue3中axios跨域问题解决记录
问题: 在vue3中使用axios,因为后端运行在本机11000端口,vue运行在8080端口,所以理所当然遇到了跨域问题问题解决: 网上查了许多方法,试过很多,但最后只用这样做问题就解决了. ...
axios get怎么还会显示跨域_在Vue中如何使用axios跨域访问数据
最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axi ...
axios 跨域传参_在Vue中如何使用axios跨域访问数据
vue.js学习之跨域请求***与axios传参一:跨域请求*** 1:打开config/index.jsmodule.exports{ dev: { } } 在这里面找到proxyTable{} ...
VUE axios 跨域访问问题：CORS error
一.问题现象项目采用的VUE前后端分离开发方案,前端axios GET请求chrome调试模式显示: http stauts:CORS error 请求头:Request URL: http://l ...
从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API
场景如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的 ...
vue里面使用axios跨域问题
前端解决: 打开main.js文件有config文件夹时: 在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码 // 配置多个代理proxy: {&qu ...
记录一次若依框架前端跨域访问 ruoyi -vue
Ruoyi -vue 若依框架前端跨域访问总的思路创建一个用于第三方平台使用的request拦截器,并定义一个新的path ,最后配置 deserver,其实网上也有很多对于我这样JAVA开发 ...
Vue前端-Flask后台跨域访问问题的处理
采用前后端分离的方式开发WEB应用,前端适用了Vue.js,后端用的是Flask. 在使用axios进行前后台交互时,浏览器控制台报错: blocked by CORS policy: No 'Acc ...

VUe3 @cli(axios)跨域访问

VUe3 @cli(axios)跨域访问相关推荐

最新文章

热门文章