一、什么是跨域

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀

二、如何实现跨域

1.vue.config.js配置

在vue脚手架vue.config.js文件下插入代码，进行代理的转发：

module.exports = {
  devServer:{
    host:'localhost', //域名
    port:8080, //端口
    proxy:{ //进行代理转发
      '/api':{
      //要解决跨域的接口的域名
        target:'http://mall-pre.springboot.cn', 
       // 是否开启本地代理 默认true; 如果接口跨域，需要进行此参数配置
        changeOrigin:true, 
       //如果是https接口，需要配置这个参数
        secure:false,           
        pathRewrite:{
          '/api':'' //重写地址
        }
      }
    }
  },
}

• 其中 ‘/api’ 为匹配项，target 为被请求的地址
• 当我们的接口遇到 /api 的时候就是说需要用到我们设置的代理了，将 /api 转化成target 的地址
• 因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的
  所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘’；如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。
• 总说明：target后面的就是需要请求的网址的公共部分，然后用/api来代理target，最后重写一些路径，请求的时候使用的我们的代理的api来作为前缀。

2. main.js配置

• 在main.js中添加以下代码就可以导入axios并使用

import axios from 'axios'
import VueAxios from 'vue-axios'

• 要使用axios进行数据的请求，需在main.js中设置公共的地址baseURL ，并进行超时设置。

// /a/b : /api/a/b => /a/b
axios.defaults.baseURL = '/api';
//超时设置
axios.defaults.timeout = 8000;

3. 进行get、post请求

使用方式见 axios的使用—数据请求 这篇文章