前端跨域问题

Posted 2021-03-20 bigharbour

1.什么是跨域？

　　跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

　　例如：a页面想获取b页面资源，如果a，b页面的协议、端口、子域名不同，所请求的访问行为都是跨域的，在Ajax身上尤其明显，浏览器为了安全问题限制了跨域访问，也就是不允许跨域请求资源（所有不被允许的跨域访问，都拒绝）。跨域是浏览器的限制，数据其实已经被浏览器接收到了，但浏览器不予其显示。这一点很重要，我们在浏览器的控制台是能看到跨域传过来的数据的。

 

同源策略：是指协议、域名、端口都要相同，其中有一个不同都会产生跨域，尤其针对Ajax。

　　下面是一些例子，看看不同。对于http://b.c.com/dir/page.html的同源测试

 

 

URL	结果	原因
http://b.c.com/dir2/index.html	成功
http://b.c.com/dir/page/page.html	成功
https://b.c.com/dir/page.html	失败	协议不同
http://b.c.com：233/dir/page.html	失败	端口不通
http://b.cd.com/dir/page.html	失败	不同域

 

　　同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以b.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

　　同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

 

不受同源策略限制的

　　1.页面中的链接，表单重定向提交表单是不受同源限制的。

　　2.使用html标签引入外部js不受同源限制。

 

目前前端程序员解决同源策略这一问题的方法是使用 jsonp 这一技术。利用标签可以跨域的特点，解决Ajax不能跨域的问题，虽然官方并没有相关规定、也没有出版任何文章承认这一技术，可在行业内这一技术确实被经常使用的，官方也是默许的。