什么是跨域
跨域是指浏览器不允许当前页面所在源去请求另一个源的数据。源是指协议,端口,域名。只要这3个中有一个不同就是跨域
- 协议跨域
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;
解决方案
1.更改header
res.header("Access-Control-Allow-Origin", "*"); // 允许的域名
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允许的请求方法
2.反向代理
客户端请求服务器端的数据是存在跨域问题的,而服务器和服务器之间是没有跨域的,可以相互请求数据。也就是说,我们可以配置一个代理的服务器,通过代理的服务器去请求服务器中的数据,请求出来的数据再返回到我们的代理服务器中,代理服务器再返回数据给客户端,这样就可以实现跨域访问数据了。
然后开始配置:
proxyTable: {
'/mall': {
target: 'http://www.wangyunfei.com',
changeOrigin: true
}
},
使用:
// 商品列表
list (listParams) {
return _http.request({
type: 'post',
url: '/mall/product/list.do',
data: listParams
})
}
就可以正常调用ajax了
3.jquery jsonp
只能用get方式请求,没有同源策略
$.ajax({
url: '地址',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})