ajax跨域访问

1、jsonp方法，jsonp方法是一种非官方方法，这种方法只支持GET方式，

不如POST方式安全。（即使使用jquery的jsonp方法，type设为POST，

也会自动变为GET）。

如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，

与ajax上传图片原理一样，但这样会比较麻烦。

因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

例如：客户端的域名是www.client.com，而请求的域名是www.server.com

如果直接使用ajax访问，会有以下错误。

XMLHttpRequest cannot load http://www.server.com/server.PHP. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

在被请求的Response header中加入

//指定允许其他域名访问

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

//响应类型

header('Access-Control-Allow-Methods:POST');

//响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

就可以实现ajax POST跨域访问了。

client.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

 <meta http-equiv="content-type" content="text/html;charset=utf-8">

 <title> 跨域测试 </title>

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

 </head>

 <body>

 <div id="show"></div>

 <script type="text/javascript">

 $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})

  .done(function(data){

  document.getElementById("show").innerHTML = data.name + ' ' + data.gender;

  });

 </script>

 </body>

</html>

server.php

<?php

$ret = array(

 'name' => isset($_POST['name'])? $_POST['name'] : '',

 'gender' => isset($_POST['gender'])? $_POST['gender'] : ''

);

header('content-type:application:json;charset=utf8');

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

header('Access-Control-Allow-Methods:POST');

header('Access-Control-Allow-Headers:x-requested-with,content-type');

echo json_encode($ret);

?>

Access-Control-Allow-Origin:*表示允许任何域名跨域访问

如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*

改为Access-Control-Allow-Origin:允许的域名

例如：header('Access-Control-Allow-Origin:http://www.client.com');

server.php

<?php

$ret = array(

 'name' => isset($_POST['name'])? $_POST['name'] : '',

 'gender' => isset($_POST['gender'])? $_POST['gender'] : ''

);

header('content-type:application:json;charset=utf8');

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(

 'http://www.client.com',

 'http://www.client2.com'

);

if(in_array($origin, $allow_origin)){

 header('Access-Control-Allow-Origin:'.$origin);

 header('Access-Control-Allow-Methods:POST');

 header('Access-Control-Allow-Headers:x-requested-with,content-type');

}

echo json_encode($ret);

?>

ajax设置Access-Control-Allow-Origin实现跨域访问的更多相关文章

  1. PHP通过AJAX及Access-Control-Allow-Origin实现跨域访问

    这里的跨域实质上是由浏览器同源策略限制的一类请求场景,浏览器同源策略SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全 ...

  2. 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  3. php 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  4. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  5. ajax 设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,t ...

  6. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  7. java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  8. java 设置允许ajax XMLHttpRequest 请求跨域访问

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest...  异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...

  9. [转] Chrome - 浏览器跨域访问设置（附：新老版本两种设置方法）

    [From] http://www.hangge.com/blog/cache/detail_1703.html 在进行前后分离的 webapp 开发,或者 H5 移动 App 开发时,我们会使用 P ...

随机推荐

  1. Linq 基本操作

    在linq中排序方法有: OrderBy()  --对某列升序排序 ThenBy()    --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...

  2. mixin 在传参中可以出现 参数 在类内部可以定义 作用域

    mixin 在传参中可以出现 参数  在类内部可以定义

  3. Guava Joiner 拼接字符串

    Joiner Guava 是Google 对Java的内置类型进行增强和扩展的工具. Joiner.on(", ").join(Iterator<> iter) Joi ...

  4. git钩子

    定义: 钩子:由事件触发的函数 分类: 客户端钩子:由诸如提交和合并这样的操作触发 服务器端钩子:由诸如接收被推送的提交这样的联网操作触发 安装: a.钩子都被存储在 .git 目录下的 hooks ...

  5. elementUI增加同级下级

    <template> <div> <el-row> <el-col :span="4"> <el-button v-on:cl ...

  6. nodejs获取服务器数据到页面

    const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...

  7. 0401-服务注册与发现、Eureka简介

    一.硬编码问题 解决方案:nginx.或.服务注册与发现 二.服务发现 注册.心跳机制 三.服务发现组件的功能 1.服务注册表:是一个记录当前可用服务实例的网络信息的数据库,是服务发现机制的核心.服务 ...

  8. Eclipse中执行maven命令（转载）

    转载自:http://blog.csdn.net/u011939453/article/details/43017865 1.如下图,右击需要执行maven命令的工程,选择"Debug As ...

  9. Android Studio工程引用第三方so文件

    应用程序二进制接口(Application Binary Interface)定义了二进制文件(尤其是.so文件)如何运行在相应的系统平台上,从使用的指令集,内存对齐到可用的系统函数库.在Androi ...

  10. C++ 语言操作符的优先级

    cppreference.com -> C++ 操作符优先级 C++ 操作符优先级        优先级     操作符 1 () [] -> .   ::         ! ~ ++ ...