1》先复习一下ajax：
用我的话讲就是使用js去发请求接收响应。具体的请看廖老师的博客详解，传送门AJAX
2》再说跨域：
浏览器有个同源策略，关于同源策略，传送门同源策略，另外在上面的传送门的文章里，廖老师在安全限制里也有讲到。就是由于这个策略，导致我们在发送ajax请求的时候，如果请求的是别的域，那么不好意思，你是拿不到想要的数据的。
3》跨域的解决办法
但实际情况中，我们需要跨域去拿到数据，那么要怎么办呢？
3.1：CORS,传送门cors
举个例子，假设你的域是my.com,你要向sina.com发请求，那么只要sina.com返回的响应中Access-Control-Allow-Origin包含my.com，那么你就可以拿到数据。其实就是你只要和要请求的服务器协商好，他们愿意给你设置一个正确的Access-Control-Allow-Origin，这样你就能拿到数据了。所以你不需要做什么操作，你只要和人家协商好就ok了。
3.2：JSONP,传送门JSONP的工作原理
这其实是利用了浏览器不限制对js文件的引用，允许跨域引用js资源。就是虽然说我们直接发ajax去请求不同源，会失败。但如果我们在script标签中，src里写别的源，我们是可以访问到的。其实不只是script标签，就像img标签，只要有src属性，我们就可以利用该属性去访问不同源了。我们在使用JSONP的时候，通常以函数调用的形式返回。
上面传送门的是贺老师的回答，廖老师的文章中对jsonp也有讲解。
对了，由于jsonp利用的是src，只能是get请求哦。
3.3：设置代理服务器
设置代理服务器的，大家接着参考廖老师的博客，我就不重复了。
4》 ajax和jsonp
哈哈，又发现一篇干货说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
大家可千万别被ajax和jsonp搞混了
4.1、
ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
4.2、
但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
4.3、
所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
4.4、
还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！
5》AXIOS
原生js去写ajax，好麻烦啊。懒推动了社会的发展，生产力。哈哈，之前用jQuery里ajax，jQuery 库支持完整的AJAX操作。但是仅仅用ajax，就把整个jQuery引入，太不划算了。而且都什么时候了，0202的下半年了，vue3都tm出来几个月了，你要是再不用axios，就有点说不过去了。所以就果断断的使用axios啦。axios的具体使用，传送门axios中文网。
所以使用axios，只能发送ajax请求，但是又想要跨域，那怎么办，就是采用上面跨域讲的第三种办法，设置代理服务器。这个其实也就是今天我要说的重点。哈哈，说了这么久，才说到重点，可见我是一个多啰嗦的人，其实前面的，是对基础知识的一个复习总结。记性不好T-T
6》Vue项目中使用AXIOS跨域
哈哈，上周五的时候，群里一个妹子碰到了需要axios跨域，不成功，原因是没有设置baseURL。这些听我详细讲。
上面4.3说到ajax通过服务端代理一样可以实现跨域。所以在vue项目中，如果你使用了axios，这时候想要跨域，那么重点来了，敲黑板，下面是所需要做的操作。啊，我这个小菜鸟，搞了好久。虽然网上一搜，资料出来一大把。纸上得来终觉浅，绝知此事要躬行啊。
一步一步来
用的第三方的接口，豆瓣的接口》api.douban.com/v2/movie/im…
第一步：创建一个vue项目。
这里我直接用脚手架使用默认配置创建了一个项目。用到的vue-cli版本是@vue/cli 4.4.1。
第二步：引入axios。
控制台中npm i axios。接下来在main.js里引入axios，并且注册成了全局的。
第三步：添加请求操作。
在App.vue中，添加button按钮，使其点击，发送ajax请求到上面的豆瓣接口。
重点来了，盆友们，看这里，访问不了，控制台报错：
请求也失败：
下面开始解决这个问题：
第四步：配置baseUrl。
注意，在main.js里加上下图红线中标注的这句话，说明：Axios.defaults.baseURL = '/api'作用是每次发送请求都会带一个/api的前缀。
第五步：配置代理proxy。传送门(官方文档)[cli.vuejs.org/zh/config/#…]
在根目录下创建一个vue.config.js文件，内容如下：
第六步：组件中发送请求。
其实就是修改App.vue中发送的ajax请求啦，因为我们设置了代理，所以在请求的时候，就不用直接写接口了。就像上面的，我在配置中将target写成了api.douban.com/v2/movie，那么…
原理说明：我们请求/imdb/tt0111161?apikey=0df993c66c0c636e29ecbb5344252a4a，就相当于请求了：localhost:8080/api/imdb/tt0111161?apikey=0df993c66c0c636e29ecbb5344252a4a，然后配置的proxy拦截了/api，并把/api以及前面的所有替换成了target的内容，因此实际请求的url是api.douban.com/v2/movie/im…
第七步：重启项目，成功。完美！！！
太开心啦啦啦啦啦啦
文章有参考基于vue-cli3/cli4解决前端使用axios跨域问题，这篇文章写得也很详细，大家可以去围观。人家废话没有我这么多，哈哈。
关于配置代理的，可以参考官方文档。
7》总结
以后遇到问题，查阅资料之后，动手去实践，这样才能验证，理解也会更深入，印象更深刻。
做事情要有条理，要分清主次，轻重缓急。不可纠结于一个不重要的地方，因小失大，浪费时间。
多向别人请教，虚心学习。
我不生产干货。我是干货的搬运工。哈哈，努力吧，成长起来，不那么菜啊。
感谢这一路走来，帮助我的可爱的大家，不知名的热心网友，好多好多，fighting，加油加油。
