浏览器拦截跨域请求处理方法

Posted 2020-09-13

解决跨域的解决办法有多种，比如jsonp，或者apache 或者nigix里面配置，或者后端的php或者java中配置 cross orgion。

在网上搜了一圈，发现处理方式都差不多，但是我们得清楚这些到底怎么用。

先看下这段代码：

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

这段代码作用是啥，其实这个是解决flash跨域的解决办法。

看淘宝的使用方式：

https://www.taobao.com/crossdomain.xml

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="*.taobao.com" />
<allow-access-from domain="*.taobao.net" />
<allow-access-from domain="*.taobaocdn.com" />
<allow-access-from domain="*.allyes.com" />
</cross-domain-policy>

一般crossdomain.xml的位置是放到项目的根目录下。

下面举例关于字体跨域的解决方法：

直接了当了说，解决此类问题，最直接的方法就是，就是给被请求的服务器，添加HTTP头响应头，这里提供两种添加HTTP头的方法：

第一种，就是在程序中添加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响应头。在这里，我们就以IIS6.0为例：

在被请求的网站上，设置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>

当然请求方式只能是get。

参考地址：关于跨域策略文件crossdomain.xml文件

浏览器拦截跨域请求处理方法（同源策略不允许读取XXX上的远程资源）