在web项目中,跨域访问很常见。所谓跨域访问,就是在访问第一个域(domain 1)的返回html页面中,有的元素比如<img><a>中携带到另外一个域(domain 2)的链接。
浏览器不会阻止对domain2的访问,但是对domain 2的相应结果却有要求,如果在domain 2 服务器给出的响应页面中没有以下header参数,尤其是Access-Control-Allow-Origin设置的如果不是domain 1的域名或者 *(表示允许任意域访问),
那浏览器收到domain2服务器的响应后,会直接拒绝。
Access-Control-Allow-Origin:* //允许的域名
Access-Control-Allow-Methods:POST,GET //允许的方法
Access-Control-Allow-Headers:x-requested-with,content-type //服务器支持的头信息
所以可以在服务端通过添加这几个参数来实现响应信息最终被客户端浏览器接受、展示。
具体通过Srping boot来实现,可以参考如下文档。
https://www.cnblogs.com/zhaosq/p/11410682.html
以上只是简单介绍XORS方式实现跨域访问,具体有很多协议细节,请参考相关更详细文档,尤其是标准协议文档。
除了XORS方式,还可以通过反向代理来实现,比如在前后端分离的架构中, 访问domain 1的一个静态页面,客户端收到响应后,会执行这个静态页面里边的javascript 代码,免不了通过ajax或别的方式发送请求到别的domain,来获取一些动态资源来渲染页面。如果我们将这些到domain 2 或者domain 3, 4, 5等的请求统统发给domain 1 的web server, 由domain 1的web server 做反向代理,将请求转发给domain 2,3,4 ...,别的domain 再将响应发给domain 1, domain 1再将响应转发给客户端浏览器,也可以解决这个问题。前提是domain 1响应的静态页面里边的链接都是指向domain 1,然后domain 1根据URL设置转发规则。
另外还可以通过JSONP方式,JSONP方式是利用了javascript的一个<script>元素,他的src属性指定的URL不受浏览器同源限制,这也是为什么在java script的<script>标签中引入很多js框架,不需要考虑同源问题。但这种方式只支持GET,这种方式已经很少用。
//当前js代码段属于http://www.test001.com/下的某个页面,里边有个链接,需要访问
//http://www.test002.com的资源,利用浏览器对<sript src="">不设限的特性,成功绕过
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 设置接口地址+数据获取成功后的回调函数(handleData)
script.src = 'http://www.test002.com/api/articleList&callback=handleData';
document.body.appendChild(script);
// 回调执行函数
function handleData(res) {
data = JSON.stringify(res)
console.log(data);
}
</script>