Vue中的跨域解决方案
什么是跨域
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域
1
2
3
4
5
6
|
# 协议跨域 http: //a.baidu.com访问https://a.baidu.com; # 端口跨域 http: //a.baidu.com:8080访问http://a.baidu.com:80; # 域名跨域 http: //a.baidu.com访问http://b.baidu.com; |
解决方案
第一种,服务端(后端)更改header
1
2
|
res.header( "Access-Control-Allow-Origin" , "*" ); // 允许的域名 res.header( "Access-Control-Allow-Methods" , "PUT,POST,GET,DELETE,OPTIONS" ); // 允许的请求方法 |
第二种:代理
原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到代理服务器中,代理服务器再返回数据给客户端,这样就可以实现跨域访问数据。
打开config/index.js,在proxyTable中添写如下代码:
1
2
3
4
5
6
|
proxyTable: { '/mall' : { target: 'http://www.abcd.com' , changeOrigin: true } }, |
使用:
1
2
3
4
5
6
7
8
|
// 商品列表 list (listParams) { return _http.request({ type: 'post' , url: '/mall/product/list.do' , data: listParams }) } |
就可以正常发送ajax或者是axios请求了
第三种:jquery jsonp
1
2
3
4
5
6
7
8
9
|
$.ajax({ url: '地址' , type: 'GET' , dataType: 'JSONP' , success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split( ',' ) } }) |