什么是跨域,为什么会跨域?
产生跨域的原因,在前台的接口,不在同一个域名下就会产生跨域。
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
持续更新中。。。