vue-cli+webpack前端使用后台接口跨域问题的多种解决及其原理和产生原因

解决方式：

下载好工程后，找到config文件夹里的index.js文件

，

然后就是把上图的target改成你的接口地址前面的那部分就好了，底下的^/api就是把前面那些替代成空字符串，接口就写替代的后面那部分路由地址就好了，不过我推荐不要用‘/api’还是用‘’空字符串代替，这样你部署到服务器的时候路由才不会出问题，不然有可能会出现问题，毕竟你前端代理在路由前面加了/api。在本地浏览器前面会替代的那部分会显示为localhost，其原理就是解决跨域问题三种方式中的设置代理

跨域所产生的原因：是由浏览器的同源策略引起的，所谓同源就是相同协议（http和https不同），相同域名，相同端口

解决方式： ①  jsonp（只适用于get方式，其实是历史遗留问题，也就是我们用script标签包裹着，就不会产生跨域）

                  ②  设置代理（也就是再写一个同源的后台脚本，利用这个脚本去获取远端数据，就不会产生跨域）

                  ③  后端处理，即XHR2（例如 php修改头）

                                         header(Access-control-Allow-Origin:  * ');   //*代表允许访问的来源（所有）

                                         header('Access-control-Allow-Method: POST,GET');  //允许访问的方式

同时这点也是面试时，喜欢问的，前端只需要扯设置代理就行了，不必要自己挖坑