为什么会产生跨域?
答:前端调用后台服务接口的时候,接口不在同域名下便产生了跨域的问题。跨域的三大要素是浏览器的限制、跨域、XHR(XHRHttpRequest)请求,缺一不可,也就是说破坏其中一个因素就可以成功访问到数据
浏览器的限制
浏览器出于安全的考虑,当发现请求是跨域的时候会做一些校验,校验不通过时会报错。控制台打开谷歌浏览器的时候让它忽略web的安全性,跨域是浏览器限制的行为与后台无关,但是让每个用户去设置浏览器属性显然是不可能的,所以该方法无法普遍使用
chrome --disable-web-security --user-data-dir=g:\temp3
JSONP访问
答:jsonp请求中,对应后台中约定的callback,json代码的内容就是callback的值作为函数名,返回的的数据作为函数的参数
动态创建一个script不是xhr,普通的xhr请求返回的是json数据对象,jsonp返回的是一个js脚本,请求URL的不同,请求带有callback字段
缺点:服务器端需要改动。
只支持GET方法。
发送的不是XHR请求,无法使用各种XHR各种优势
$.ajax({
url: base + "/get1",
dataType: "jsonp",
success: function (json) {
result = json;
}
})
跨域——被调用方
答:支持跨域。支持http协议的关于跨域方面的要求来做修改,a域名调用b域名的时候,在b域名返回的信息加入一些字段告诉浏览器允许a域名调用,浏览器通过校验不会报跨域错误。可以服务器端实现,或者NGINX配置或者APACHE配置
header("Access-Control-Allow-Origin: *");
跨域——被调用方
答:隐藏跨域,通过一个代理,从浏览器发出去都是a域名的请求,在代理里面把指定的url转到b域名里面,浏览器看起来是同个域名则不会报错
http服务器的反向代理
server{
listen 80;
server_name a.com;
location/{
proxy_pass http://localhost:8081/;
}
location/ajaxserver{
proxy_pass http://localhost:8080/test/;
}
}
vue里面解决跨域
changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境
打开config/index.js,在proxyTable中添写
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}
}
使用axios请求数据时直接使用“/api”:
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
打包部署时
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}