vue 使用axios请求和vue-cli这种脚手架工具实现跨域传输

vue 使用axios请求和vue-cli这种脚手架工具实现跨域传输
作者：秋名
撰写时间：2020 年 6 月 21 日
技术：前端vue使用Axios请求数据，vue 前端服务器代理，使用vue-cli这种脚手架工具实现跨域传输

Axios是什么？用在什么场景？如何使用？：http://www.imooc.com/article/287900
Axios特性
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

//安装
npm install axios --save 

本地模拟数据，不提交码云服务

vue 前端服务器代理，proxyTable简要叙述：https://www.cnblogs.com/wasbg/p/12659610.html

  —— proxyTable 是 vue-cli 脚手架在开发模式下,为我们提供的一个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).
  ——为什么要有 proxyTable?有时候在开发期间,我们请求的后台接口(a.b.c/data.json)不和vue(localhost:8080)在同一个域名,后台也并未提供cors跨域服务.
  
  
  ——正常情况下,我们无法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回没有给vue.
——解决办法有两个:
1、服务器开启 cors (最简单,也是最方便的)
2、用代理服务器中转一下(vue请求的还是自己的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)

//文件路径：config/index.js

 // Paths webpack-dev-server工具提供的功能
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 使用vue-cli这种脚手架工具实现跨越传输
    proxyTable: {
      //当请求api的时候，把请求转发到8080这个服务器端口
      '/api': {
        target: 'http://localhost:8080',//目标接口域名
        //pathRewrite把路径替换，一旦请求是/api就更换成 请求本地/static/mock
        cssSourceMap: true,//是否跨域
        pathRewrite: {
          '^/api': '/static/mock' //重写接口
        }
      }
    },

//配置 proxyTable 来进行跨域

proxyTable 跨域的基本原理是:
	1、在开发模式下,webpack 会为我们提供一个http代理服务器.
	2、我们请求接口的时候,实际上是请求的webpack提供的这个http代理服务器.
	3、在由这个代理服务器请求真是的数据服务器.
	4、最后数据经由webpack代理服务器,最后转交给我们的vue程序.
	
！！！！！为什么加个代理服务器就可以了?
！！！！因为代理服务器不是浏览器,它没有同源策略的限制.

//文件路径：src/pages/Hellow.vue

export default{
    name:'Home',
    components:{
      HomeHeader,
    },
    methods:{
	//发起请求
      getHomeInfo (){
        axios.get('api/index.json')
        .then(this.getHomeInfoSucc)
      },
	  //成功返回
      getHomeInfoSucc (res){
          console.log(res)
      }
    },
    mounted () {
       this.getHomeInfo()
    }
}