前后端分离跨域问题

1.在项目中安装axios

npm install axios --save(安装并且在package.json中写入依赖)

2.在main.js引入axios

import axios from 'axios'

3.在main.js写入vue实例

Vue.prototype.$axios = axios

4.config/indes.js写入配置代理

    proxyTable: {
        '/runoob': {
            // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
            target: 'https://www.runoob.com',
            // 允许跨域
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/runoob': ''
            }
        },
        '/baidu': {
            // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
            target: 'https://www.baidu.com',
            // 允许跨域
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/baidu': ''
            }
        }
    },

5.根据不同的请求前缀选择不同的代理

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="runoobAxios">TestAxios</button>
    <button @click="baiduAxios">baiduAxios</button>
  </div>
</template>

<script>
export default {
  name: 'Mixins',
  data () {
    return {
      msg: 'vue.js混入'
    }
  },
  methods: {
    baiduAxios () {
      // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
      // 由于 main.js 里定义了每个请求前缀，此处的 / 即为 /baiidu，
      // 经过 vue.config.js 配置文件的代理设置，会自动转为 https://www.baidu.com/，从而解决跨域问题
      this.$axios.defaults.baseURL = '/baidu'
      this.$axios.get('/').then(response => {
        if (response.data) {
          console.log(response.data)
        }
      })
        .catch(errer => {
          alert('请求失败')
        })
    },
    runoobAxios () {
      // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
      // 由于 main.js 里定义了每个请求前缀，此处的 /try/ajax/json_demo.json 即为 https://www.runoob.com/runoob/try/ajax/json_demo.json，
      // 经过 index.js 配置文件的代理设置，会自动转为 https://www.baidu.com/，从而解决跨域问题
      this.$axios.defaults.baseURL = '/runoob'
      this.$axios({
        url: '/try/ajax/json_demo.json'
      })
        .then(response => {
          if (response.data) {
            console.log(response.data)
          }
        })
        .catch(errer => {
          alert('请求失败')
        })
    }
  }
}
</script>

注意可以在main.js中设置全局前缀：

Axios.defaults.baseURL = '/api'// 使每次请求都会带一个 /api 前缀