vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具。 axios的官方github: https://github.com/mzabriskie/axios
在工程中的src目录下新建一个名为api的目录,在src/api目录下新建一个index.js文件。
在index.js里面,编写如下内容:
绑定api/index.js文件,添加如下内容:
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
代码如下:
<template>
<div>index page</div>
</template>
<script>
export default {
created () {
this.$api.get('topics', null, r => {
console.log(r)
})
}
}
</script>
在console下可以看到如下数据,说明接口请求成功了。
在前后端分离的情况下,要解决的问题就是跨域问题。 配置 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("*");
}
」