解决前端跨域的方法

引言:由于浏览器的安全性能问题,导致ajax非同源请求无法访问,但是有些时候我们必须要用到这一功能,所以整理出四种层面不同思想来解决这个问题

 

一、Javascript

在javaCript层面,有一种耳熟能详的手段来解决跨域问题,那就是jsonp,原理是在客户端注册一个callback函数,然后把callback的名字传给服务器,此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

 

二、Php

在html直接请求同源地址的接口文件,如api.php,然后在api.php中利用curl扩展去请求需要请求的页面获取相关数据,然后返回给前端页面,这种方式相当与代理,利用本地同源的页面去请求非同源页面

 

三、HTML5

HTML5之前的标准是没有办法进行跨域的,但是但HTML5中新增加的特性可以实现这一功能,通过设置Access-Control-Allow-Origin头可以在页面中允许特定页面或者所有页面的请求,在php中可以使用header函数设置

header('Access-Control-Allow-Origin:*');

 

四、Nginx

Nginx服务器层面的解决方法和php中类似,也是代理模式,前端页面请求同源地址,然后用nginx重写规则将此请求代理到需要请求的非同源页面,达到一种欺骗浏览器的效果。

 

尾语:部分浏览器经过设置以后也可以解决跨域问题,但是作为程序员,我们不能把希望寄托在用户的身上,所以还是从上述解决方案中挑选为佳

发表评论