跨域问题处理

 

描述：跨域问题是由于浏览器基于安全的考虑，当跨域请求时，浏览器收到响应消息后，只有文件头消息中含有Access-Control-Allow-Origin属性才可以将消息主体的数据进行处理。

法一（前台跨域处理）：

前台跨域问题： 1,使用jsonp格式数据传递参数可以解决

                          2,使用jquery插件 ： jquery-jsonp      https://github.com/congmo/jquery-jsonp

==================== jquery-jsonp ==============================================
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById?id=1";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

=====================使用jsonp格式=================================================

使用jsonp格式， 如jquery中ajax请求参数   dataType:'JSONP'

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

         $.ajax({

            url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",

             type:'GET',

             dataType:'JSONP',

             success: function(data){

                 $('body').append( "Name: " + data );

             }

         });

server端加上header设为 Access-Control-Allow-Origin：*

header("Access-Control-Allow-Origin: *"); # 跨域处理

 

法二（后台跨域问题）：加入请求头可以解决ajax跨域问题

1，webapi在配置文件中加入这几句就可以解决ajax跨域问题
<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
<system.webServer>


2， 一般处理程序解决ajax跨域请求的问题
       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");
       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Test");