网站架构--ajax跨域问题总结--方法以及调试

 

  首先，ajax默认是不允许跨域的，
  主要原因就是因为浏览器的“同源策略”。同源策略的目的是为了安全性，当然有些情况是我们需要跨域进行请求的，所以在我们自己控制了安全性的情况下，进行跨域请求是理所当然的了。
 
 

  一、方法介绍
 
 

  在网站架构设计时，有五种方法规避这个限制，实现跨域请求。
 
 


 
 
设置head头，严格来说不算
架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务）
JSONP
WebSocket
CORS
 

  1、设置head头
 
 

          在请求页面上使用Access-Control-Allow-Origin标头。
 
 

  　　使用如下标头可以接受全部网站请求：
 
 

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

  　　
  使用如下标头可以接受指定网站请求：
 
 

   	header('Access-Control-Allow-Origin:http://www.abc.com')
 
 

  2、架设服务器代理
 
 

  这个原理比较简单，比如说在网站中写php程序，然后通过php程序来访问外部服务
 
 

  3、JSONP
 
 

  JSONP之所以能够用来解决跨域方案,主要是因为 <script>js 脚本拥有跨域能力,而JSONP正是利用这一点来实现。具体原理如图
 
 

  
 
 
     
  服务器端代码：
 
 

  $data
   = json_encode(
  array
  (
  'msg'
  =>
  'msg....'
  ));
 
 

  die
  ( 
  $_REQUEST
  [
  'function_name_index'
  ].
  '('
  .
  $data
  .
  ')'
   );
 
 

  客户端代码
 
 

  <!
  DOCTYPE
   html>
 
 

  <
  html
   lang="en" class="">
 
 

  <
  head
  >
 
 

  <
  meta
   charset="utf-8" />
 
 

  <
  title
  >测试</
  title
  >
 
 

  <
  script
   src="http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js"></
  script
  >
 
 

  <
  body
  >
 
 

  <
  script
  >
 
 

      $.ajax({
 
 

          url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
 
 

          dataType:'jsonp',
 
 

          jsonp:'function_name_index',
 
 

          jsonpCallback:'function_name',
 
 

          success:function(data){
 
 

              alert(data.msg);
 
 

          }
 
 

      });
 
 

  </
  script
  >
 
 

  </
  body
  >
 
 

  </
  html
  >
 
 

  在ajax请求中，使用jsonp数据格式，所以讲dataType参数设置为jsonp，平常，还加到了jsonp和jsonpCallback两个参数，结合代码，不难看出这两个参数作用：
 
 

  　　
  jsonp的作用是设置服务器获取回调函数名称参数的下标参数，jsonpCallback的作用就是设置回调函数，相当于input标签中name和value，jsonp对应name，value对应jsonpCallback。
 
 

  　　更多jsonp请求可以参考：
  http://www.cnblogs.com/duanhuajian/p/3152617.html，
  有很详细的原理介绍
 
 

  4、
  CORS请求原理
 
 

  CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
 
 

  基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。
 
 

  关于CORS，强烈推荐阅读 
 
 

  跨域资源共享 CORS 详解(阮一峰)
 
 

  网上有人总结了一个流程图
 
 

  
 
 

  浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。
 
 
请求方法是以下三种方法之一：HEAD,GET,POST
HTTP的头信息不超出以下几种字段：
 
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
 
 

  凡是不同时满足上面两个条件，就属于非简单请求。
 
 


 
 

  PHP后台配置
 
 

  PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
 
 
第一步:配置Php 后台允许跨域
 

  <?phpheader(
  'Access-Control-Allow-Origin: *'
  );header(
  'Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'
  );
  //主要为跨域CORS配置的两大基本信息,Origin和headers
 
 
第二步:配置Apache web服务器跨域(httpd.conf中)
 

  原始代码
 
 

  <Directory />
      AllowOverride none    Require all denied
  </Directory>
 
 

  改为以下代码
 
 

  <Directory />
      Options FollowSymLinks    AllowOverride none    Order deny,allow    Allow from all
  </Directory>
 
 


 
 

  二、ajax跨域调试
 
 

  1、
  第一种现象:
  No 'Access-Control-Allow-Origin' header is present on the requested resource
  ,并且
  The response had HTTP status code 404
 
 

  
 
 

  出现这种情况的原因如下：
 
 
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
 

  解决方案: 后端允许options请求
 
 

  2、
  第二种现象:
  No 'Access-Control-Allow-Origin' header is present on the requested resource
  ,并且
  The response had HTTP status code 405
 
 

  
 
 

  这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如
  安全配置
  ),阻止了OPTIONS请求,才会导致这个现象
 
 

  解决方案: 后端关闭对应的安全配置
 
 

  3、
  第三种现象:
  No 'Access-Control-Allow-Origin' header is present on the requested resource
  ,并且
  status 200
 
 

  
 
 

  这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象
 
 

  比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
 
 

  解决方案: 后端增加对应的头部支持
 
 

  4、
  第四种现象:
  heade contains multiple values '*,*'
 
 

  
 
 

  
 
 

  表现现象是，后台响应的http头部信息有两个
  Access-Control-Allow-Origin:*
 
 

  说实话，这种问题出现的主要原因就是进行跨域配置的人不了解原理，导致了重复配置，如:
 
 
常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin(比如代码手动设置了返回*))
常见于.net后台(在IIS和项目的webconfig中同时设置Origin:*)
 

  解决方案(一一对应):
 
 
建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可
 


 
 

  三、php cors
 


查看原文：http://www.architecy.com/archives/301