跨域的彻底讲解

什么是跨域,为何会跨域？

产生跨域的缘由，在前台的接口，不在同一个域名下就会产生跨域。

1.浏览器的限制，出于安全的考虑，产生跨域不会让请求经过，可是后端是不会报错的

2.协议，域名，端口，任何一个不同都会产生跨域

3.请求是XHR请求，若是不是XHR请求，就算跨域，浏览器也不会报错

解决方案以下：

接口准备：http://m.kugou.com/?json=true  酷狗音乐的音乐列表接口

解决方案一：

　　使用JSONP，JSONP请求是动态的建立了script标签来进行请求，后端也须要去进行改动，不然会当作是JSON处理，从而报错，JSONP返回的

应该是一个JS。

　　JSONP请求的弊端：

　　　　1.服务器须要进行同步改动

　　　　2.JSONP只支持get请求方法

　　　　3.发送的不是XHR请求 

解决方案二： 

　　关于vue-cli 中请求代理的配置

 proxyTable: { "/proxy/": { target: "http://m.kugou.com", "secure": false, "changeOrigin": true, "pathRewrite": { "^/proxy": "" }, "headers": { "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36" } } },

　　在项目的config/index.js中，dev里面有个 proxyTable，在里面写上代理的详细信息。

　　/proxy/开头的请求，都会使用target的域名进行请求，

　　secure中 false 为 http请求，true为https请求

　　changeOrigin 为true 能够进行跨域请求

　　pathRewrite 的^/proxy 为在地址后面拼接别的地址

　　headers 的 User-Agent 为 请求的UA，能够写手机的UA，这样去模拟手机请求

　　页面请求方式 直接在url 中写入 /proxy/rank/list?json=true

 

 

　　持续更新中。。。