vue中使用axios调用后端接口

96

foochane 关注

2018.05.02 21:55 字数 288 阅读 77评论 1喜欢 1

vue本身不支持ajax接口的请求，所以在vue中经常使用axios这个接口请求工具。
axios的官方github： https://github.com/mzabriskie/axios

1. 封装axios工具

在工程中的src目录下新建一个名为api的目录，在src/api目录下新建一个index.js文件。

[图片上传失败...(image-ad39a-1536033683980)]

在index.js里面，编写如下内容：

2 修改main.js文件

绑定api/index.js文件，添加如下内容：

// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api

3 修改index.vue

代码如下：

4 浏览器查看

在console下可以看到如下数据，说明接口请求成功了。

[图片上传失败...(image-24c999-1536033683980)]

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

https://blog.csdn.net/qq779446849/article/details/53102925