js中ajax跨域之cors几个例子分析

由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),ajax跨域请求的两种方案

方案一:jsonp (JSON with Padding)
   
但是jsonp有一个缺点就是不支持get传参

方案二:CORS(跨域资源共享,Cross-Origin Resource Sharing)

此方案支持post提交
    假设我们在http://www.a域名.com域名ajax请求http://www.111cn.net域名下的数据;若使用cors来实现,ajax跨域请求。
    只要在http://www.111cn.net域要在被请求的php脚本头部添加
    header("Access-Control-Allow-Origin:http://www.a域名.com");便可。
    这句的意思是允许http://www.a域名.com跨域访问到http://www.111cn.net域

代码实例:

[http://www.a域名.com域名下的 index.html 文件]

 代码如下 复制代码

<!--此域名在http://www.a域名.com域名下-->
<html>
<head>
    <title>CORE-AJAX跨域</title>
    <meta charset="utf-8" />
    <script src="http://gongwen.sinaapp.com/Public/Js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
            var url='http://www.111cn.net/server.php';
            $.post(url,{name:'巩文',blog:'www.bestphper.cn'},function(data){
                var info=eval('('+data+')');
                $('body').html('name:'+info.name+'<br>blog:'+info.blog+'<br>from:'+info.from);
            });
        });
    </script>
</body>
</html>

[http://www.111cn.net域名下的 server.php 文件]

 代码如下 复制代码

<?php
    //注此文件在http://www.111cn.net域名下
    //header("Access-Control-Allow-Origin:http://www.a域名.com");
    $arr=array(
        'name'=>$_POST['name'],
        'blog'=>$_POST['blog'],
        'from'=>'http://www.111cn.net'
        );
    echo json_encode($arr);

 

[火狐浏览器访问 http://www.a域名.com ]

那么问题来了,如何用CORS来解决这个ajax跨域问题呢?

只要将http://www.111cn.net域名下的server.php文件中的

//header("Access-Control-Allow-Origin:http://www.a域名.com");

的注释去掉便可。去掉之后再用浏览器进行访问http://www.a域名.com

[其它]

若把php文件的

header("Access-Control-Allow-Origin:*");写成这样,则说明任务一个域都可以去ajax请求此文件

时间: 2024-09-22 20:38:55

js中ajax跨域之cors几个例子分析的相关文章

jquery中ajax跨域方法实例分析_jquery

本文实例分析了jquery中ajax跨域.分享给大家供大家参考,具体如下: JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 方法一: jsonp之 getJSON js var url = "http://localhost/mytest/jsonp_php.php?callback=?"; $.getJSON(url, { "age": 21, "name

js中各种跨域问题实战小结

什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略是怎么回事了:javascript的同源策略 于是当我们想某些特定的功能的时候,实现合理的跨域请求就显得比较重要了. -->1.原生Ajax对象xhr的跨域 -->2.简单jsonp -->3.图像Ping -->4.document.domain+iframe实现跨域 javascr

javascript中AJAX 跨域问题解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法  代码如下 复制代码 $.ajax({     type : "get",     async:false,  

IE8中ajax 跨域获取html模板解决方法

报错: statusText :"No Transport"   1,只有当浏览器是IE8 时才引入js: Html代码   <!--[if IE 8]>       <script type="text/javascript"               src="http://${static_domain}/chanjet/js/lib/common/jQuery.XDomainRequest.js"></sc

Js中启用CORS实现Ajax跨域请求

启用CORS实现Ajax跨域请求 某年某月的一天,需要实现这样一个需求,在当前站点中用ajax发送一个请求到另一个站点获取数据,b.com   ->    s.com,刚开始以为没什么,不就一条请求嘛,立马就写了出来,结果出现一个错误200的请求,还有一个提示信息: 20141020162144 这是什么情况,于是找度娘问了起来,大概的结果如下(部分文字直接拿过来的): 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程_实用技巧

随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主

Node.js配合node-http-proxy解决本地开发ajax跨域问题_node.js

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

使用HTML5中postMessage知识点解决Ajax中POST跨域问题_AJAX相关

由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口

基于iframe实现ajax跨域请求 获取网页中ajax数据_AJAX相关

大家都知道,在不同域的情况下是不能发送ajax请求的,浏览器会报如下错误: 同时,内嵌的iframe中无法进行跨域通信的,也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe,不过并没有什么意义).iframe跨域通信时,浏览器会报如下错误: 其实这两个问题都是由于跨域造成的. 下面就介绍如何解决这个问题. 其实问题的关键就在于,浏览器在解析ajax请求地址时会和当前网页的地址进行比较,如果是跨域的,那就禁止掉并且报错.那么我们如果让