为什么会出现跨域问题?

        浏览器的同源策略

  那什么是同源呢?

        两个页面具有相同的协议（protocol），主机（host）和端口号（port）

举个例子:

        http://www.baidu.com:6666//   ===>  协议 :// 域名:端口号 //

那什么是跨域呢?

        当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

那么如何解决跨域问题呢?

        个人推荐一个挺实用的方法:配置代理

proxy: {
      // 请求是的路径中包含/api  就会走代理服务器  可以写多个
      '/api': {
        // target目标:真实的接口服务器地址
        target: 'http://xxxx/'
        // pathRewrite 路径重写
        pathRewrite:{
           '^/api':''
        }
      }
    }

分析:

        '/api'   

        匹配自己的路径中 有/api才会执行这个代理

        target: 'http://xxxx/'

        将/api之前的路径修改为设置的路径

        举个例子:

        原路径:  'http://aabbcc/api/ddd'

        target处理后:  'http://xxxx/api/ddd'

        pathRewrite:{  '^/api':''  }

        将原路径中的/api切除掉

        举个例子:

        原路径:  'http://xxxx/api/ddd'

        pathRewrite处理后:   'http://xxxx/ddd'

总结:

讲人话:

        假设你自己的路径是 http:// localhost:6666/get/getBooks

        后端的接口是  http://192.168.11.11:8888/getBooks

那么你就可以设置一个   '/get'  的代理

        target: 'http://192.168.11.11:8888'

        pathRewrite:{  '^/get':''  }

        
补充一下jsonp的方法:

        在页面中我们可以发现script,img的src,或者link的herf都没有被同源策略所限制.而src和herf链接的静态资源在本质上来说也是一个get请求

        由此我们可以得出jsonp的原理,利用script的src属性,将get请求发送到src指定的地址去.而这个地址就是我们请求的服务端接口地址.

注意:此处必须使用script标签,否则返回的数据不被当成是js代码执行

        我们通过src发送的get请求除了所必须的参数外,还需定义一个callback函数,通过函数传参的方式拿到返回的数据