VUE使用axios访问API

一、安装axios

npm install axios

二、main.js中引入axios

1、引入axios

import Axios from 'axios'
/*设置全局axios，设置后即可在其它vue中直接使用$axios */
Vue.prototype.$axios = Axios;

三、在对应vue中添加请求

1、get请求

<script>

  export default {
    name:'test',

    data () {
      return {
        info: ''
      }
    },
    methods: {
      getVehicle(){
        this.$axios.post('url')
          .then((response)=>(this.info = response))
      }
    }

  }
</script>

2、post请求

<script>

  export default {
    name:'test',

    data () {
      return {
        info: ''
      }
    },
    methods: {
      getVehicle(){
        this.$axios.post('url',params)
          .then((response)=>(this.info = response))
      }
    }

  }
</script>

注：
跨域问题XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'
处理方式：1、在config/index.js文件，module.exports里dev的proxyTable节点添加如下代码

'/sin': {
        target: 'http://api.xjw.cloud', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/sin': '/'
        }

使用代理请求api，提交服务器后，接口请求返回We're sorry xxx doesn't work properly without JavaScript enabled
处理方式：配置服务器ngix
打开conf \ nginx.conf，添加监听端口和配置，url后需添加“/”

image.png