`

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

阅读更多
引用
在浏览器请求中,出现跨域访问资源的问题,我们肯定会遇到。如果跨域请求被阻止,有可能导致css、js 、ajax请求、font字体等资源出现无法正常访问的问题。接下来,就介绍下解决同源策略不允许读取远程资源的问题。


解决此类问题,最直接的方法就是,就是给被请求的服务器,添加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>


   一般完成以上工作,就可以了。网上还有说在被请求服务器根目录下创建:"crossdomain.xml"的文件。内容格式如下:

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




分享到:
评论

相关推荐

    web前端开发中的常见技能问题.doc

    web扫码登录,判断用户设备,浏览器拦截跨域请求处理方法,ios 键盘遮挡问题

    前端后端跨域问题

    跨域 原因:  浏览器限制  跨域(域名,端口,协议,ip不一样)  在使用XMLHTTPRequest对象发送HTTP请求时,会遇到同源策略问题,域不同请求会被浏览器拦截。

    JS跨域请求的问题解析

    如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策不会阻止将数据写入,只会禁止他们从域中读取数据, 或者对从其域收到的响应做任何事情。...

    使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

    而在这种前后端分离的开发模式下,往往前端项目与后端项目的 IP地址、端口号、协议 大概率是不一样的,由于浏览器的安全策略设定,不进行相应配置的话,前端的请求就会被浏览器拦截掉啦。 假设某个页面组件在加载的...

    axios常见配置选项 跨域

    文章目录常见配置选项实际项目中的简化写法并发请求多个请求接口实际项目生命周期中使用axios 数据存入data()模块封装拦截器axios的post的请求头Content-Typeaxios 全局配置接口函数的封装配置设置代理解决请求跨域...

    JSONP 原理

    发生跨域请求时,服务端response的数据会被浏览器拦截住 解决跨域请求的方法有很多种,jsonp就是其中一种 原理就是: 1.通过html元素标签上的 src 属性请求到的资源不会被认为是跨域的 2.script 标签请求到的JS文件资源...

    Django跨域请求原理及实现代码

    一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。...已拦截跨源请求:同源策略禁止读取位于

    django基于cors解决跨域请求问题详解

    一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。...已拦截跨源请求:同源策略禁止读取位

    九种跨域方式实现原理

    同源策略限制内容有:Cookie、LocalStorage、IndexedDB等存储性内容DOM节点AJAX请求发送后,结果被浏览器拦截了但是有三个标签是允许跨域加载资源&lt;imgsrc&gt;&lt;linkhref&gt;[removed]当协议、子域名、主域名、端口号中任意...

    Moesif Origin & CORS Changer-crx插件

    此插件可让您直接从浏览器发送跨域请求,而不会收到跨源错误。 您可以使用此插件覆盖Request Origin标头,并将Access-Control-Allow-Origin设置为*。 更新:我们收到了Chromium小组的评论,即对CORB的请求预检拦截的...

    Asp.netWebAPI解决跨域详解

    浏览器安全防止web页面发出AJAX请求到另一个领域。这种限制称为同源策略,这是为了防止恶意网站读取敏感数据。然而,有时候。您可能想要让其他网站调用您的webAPI。CrossOriginResourceSharing(CORS)是一种W3C标准,...

    cors-drupal8:如何在 Drupal 8 中注册一个新的中间件服务

    Drupal 8 CORS 感谢 Drupal 8 中的问题 (#2303673)[ ] 现在我们有了一个新的强大组件,(StackPHP)[ ://isstackphp HttpKernel 类的中间件,该中间件... 否则,根据同源安全策略,Web 浏览器将禁止此类“跨域”请求。

    乐优商城.xmind

    通过 @PathVariable 可以将 URL 中占位符参数绑定到控制器处理方法的入参中:URL 中的 {xxx} 占位符可以通过@PathVariable(“xxx“) 绑定到操作方法的入参中。 select * from tb_category where id in (select ...

    Corser-crx插件

    跨浏览器扩展,用于授权跨域资源共享(CORS)请求 此扩展程序可以安装在浏览器上… 跨浏览器扩展,用于授权跨域资源共享(CORS)请求。 此扩展程序可以安装在支持WebExtensions API的浏览器上...

    ken-axios:基于XMLHttpRequest的网络请求,使用typescript重构,并使用的demo与模块的单元测试

    支持跨域请求携带cookie 支持客户端XSRF防御 支持上传/下载进度监控 支持http授权 自定义合法状态码 自定义参数序列化 支持配置baseURL axios.all axios.spread axios.getUri 所有axios官方库浏览器端功能已实现 ...

    ts-axios::watermelon: 用 TypeScript 实现 axios 浏览器部分,完善的 demo 与单元测试

    支持跨域请求携带 cookie 支持客户端 XSRF 防御 支持 upload/download 进度监控 支持 http authorization 自定义合法状态码 自定义参数序列化 支持配置 baseURL axios.all axios.spread axios.getUri 所有 axios ...

    chrome-extension-manifest-v3-declarativeNetRequest-sample:Chrome Extension Manifest V3的declarativeNetRequest示例

    在Manifest V3中,修改http请求和响应的方式已更改。 我尝试了新的declarativeNetRequest API,我觉得它们有点困难。 我想要一个简单的用法示例。 这就是为什么我制作这些样品。 执照 公共区域。

    开源bbs源码java-http-protocol:输入URL到页面加载的过程

    从服务器接收到请求到对应后台接收到请求(负载均衡,安全拦截以及后台内部:查询数据库,服务端渲染或者客户端渲染) 后台和前台的http交互(http头部、响应码、报文结构、cookie,常用工具的例如swagger) http缓存 ...

    ForceCORS-crx插件

    ***关于权限***为了允许您将标头附加到任何任意位置,此扩展名要求访问权限以拦截任何Web请求。 但是,默认情况下,扩展名不监视任何Web流量。 该扩展名只会读取您明确列入白名单的网址,并且只会添加您指定的标头。...

Global site tag (gtag.js) - Google Analytics