vue中使用axios调用后端接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具。axios的官方github: https://github.com/mzabriskie/axios1. 封装axios工具在工程中的src目录下新建一个名为api的目录,在src/api目录下新建一个index.js文件。在index.js里面...
·
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具。
axios的官方github: https://github.com/mzabriskie/axios
1. 封装axios工具
在工程中的src目录下新建一个名为api的目录,在src/api目录下新建一个index.js文件。
在index.js里面,编写如下内容:
2 修改main.js文件
绑定api/index.js文件,添加如下内容:
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
3 修改index.vue
代码如下:
<template>
<div>index page</div>
</template>
<script>
export default {
created () {
this.$api.get('topics', null, r => {
console.log(r)
})
}
}
</script>
4 浏览器查看
在console下可以看到如下数据,说明接口请求成功了。
5 解决跨越问题
在前后端分离的情况下,要解决的问题就是跨域问题。
配置 webpack 将接口代理到本地
5.1 修改config/index.js文件
找到proxyTable,修改域名
proxyTable: {
'/api':{
target:'http://localhost:8036/', //接口地址
changeOrigin:false,
pathRewrite:{
'/api':''
}
},
'/ms':{
target:'http://localhost:8036/',
changeOrigin: false
}
},
// Various Dev Server settings
host: 'localhost',
port: 8099,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
这种方法好像解决不了。
5.2 修改后端代码
这边后端用的是java 基于springboot框架,
在Application.java文件中添加如下代码:
public class Application extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedHeaders("*")
.allowedOrigins("*")
.allowedMethods("*");
}
」
【参考链接】:
https://blog.csdn.net/fungleo/article/details/77601761
更多推荐
已为社区贡献1条内容
所有评论(0)