Vue 2.X跨域解决方案

1. 问题
   页面访问地址：http://localhost:8080 ，使用axois发送登录请求时报错，报错信息如下：

登录请求写法如下：

handLogin() {
    this.axios({
        url: "/api/***/login",
        method: "POST",
        data: {                          // 请求参数
            userName: this.userName,
            password: this.password
        }
    }).then(res => {
    })
    .catch(e => {
    })
}

百度了一些时间发现是跨域，然后找了几种解决方案：
1.1 设置头部信息，无效

headers: {
   'content-type': 'application/json',//设置请求头请求格式为json
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE'
 }

1.2 配置代理
vue2.x 配置如下：

//其他配置省略
dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
     '/api': {
         timeout: 3000,
         proxyTimeout: 3000,
         target: 'http://host:post',     // 目标url
         changeOrigin: true,                     // 是否跨域
         pathRewrite: {
             '^/api': ''                         // 其中/api等价于前面的目标地址
         }
     }
 },

跨域基本知识：

1. 为什么跨域
   浏览器为了安全性采用了同源策略，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
2. 什么是跨域
   当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域