豆豆の鱼.

Life record . 记录自己的日常琐事.

站点出现【已拦截跨源请求:同源策略禁止读取】的解决办法

51A28CC7 站点出现【已拦截跨源请求:同源策略禁止读取】的解决办法

同样是今天把站点从HTTPS切换回HTTP时候发现的问题,在替换完成后,检查源码时候(ctrl+shift+j)出现了怕【已阻止跨源请求:同源策略禁止读取远程资源】的警告提示,出现这个提示是出现了跨域请求被阻止,这种警告有可能导致css、js 、ajax请求、font字体等资源出现无法正常访问的问题。那我们就来分析解决下同源策略不允许读取远程资源的问题。

关于这个警告问题,很直白的说,解决此类问题,最直接的方法就是,就是给被请求的服务器,添加HTTP头响应头,下面来看下都是怎么解决的。

20180206222839605 站点出现【已拦截跨源请求:同源策略禁止读取】的解决办法

第一种方法:程序中添加HTTP头——添加此段代码的目的很简单,也就是告诉浏览器,这个资源是运行远程所有域名访问的。当然,此处的*也可以替换为指定的域名,出于安全考虑,建议将*替换成指定的域名。

如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
'Access-Control-Allow-Origin': '*',
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

第二种方法:在服务器上添加HTTP响应头,意思就是在你的站点,也就是被访问的站点上设置HTTP头。

//在被请求的网站上,设置HTTP头,添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。

第三种方法:使用JSONP格式,即在jQuery中ajax请求参数dataType:’JSONP’:

<script> 
    $.ajax({ 
        url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228", 
        type:'GET', 
        dataType:'JSONP',  // 处理Ajax跨域问题
        success: function(data){ 
            $('body').append( "Name: " + data ); 
        } 
    }); 
</script>

以上的方法,一般来说选择其中一种方法就可以解决这个问题了,网上还流行另一种方法,也是很简单粗暴。  在自己的服务器根目录下创建:”crossdomain.xml”的文件。内容格式如下:

<?xml version="1.0"?>
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注