什么是跨域

我们所说的跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。 在此说明一下，所谓的同源，指的是域名、协议、端口均相等。举例如下：

http://www.abc.com/a/b 调用 http://www.abc.com/d/c（非跨域）
http://www.abc.com/a/b 调用 http://www.def.com/d/c （跨域：域名不一致）
http://www.abc.com:81/a/b 调用 http://www.abc.com:82/d/c （跨域：端口不一致）
http://www.abc.com/a/b 调用 https://www.abc.com/d/c （跨域：协议不同）

另外值得注意的是，localhost 和 127.0.0.1 虽然都指向本机，但也属于跨域。在一个 http 请求中，http 头部 Referer 或 Origin 字段标识了当前域名，Host 字段标识了此时请求的域名。所以通过 ajax 请求第三方的数据，就会出现浏览器的跨域问题。

如何解决跨域

解决跨域问题，有如下三种方式：

1、使用jsonp

• JSONP 是 JSON with Padding 的略称。它是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

• jsonp 解决跨域问题的原理是，浏览器的 script 标签是不受同源策略限制的，我们可以在 script 标签中访问任何域名下的资源文件。利用这一特性，用 script 标签从服务器中请求数据，同时服务器返回一个带有方法和数据的 js 代码，请求完成，调用本地的 js 方法，来完成数据的处理。 更多关于 jsonp 的使用方式，可以参考Jsonp和java操作例子 (opens new window)，优缺点可以参考JSONP原理优缺点(只能GET不支持POST) (opens new window)。

  以 Jquery 的 ajax 方法为例：

  $.ajax({    
    url:"",    
    dataType:'jsonp',    
    data:'',    
    jsonp:'callback',  
    //传递给请求处理程序或页面的
    //用以获得jsonp回调函数名的参数名(默认为:callback)  
    success:function(result) {    
        //成功的处理  
    },  
    error:function(){  
        //错误处理  
    }   
  });
  

  服务端此时返回的不能是普通的 json 字符串，而是一段可以被前端 js 执行的一段js代码。json 与 jsonp 格式的区别：

  //json格式
  {  
      "message":"获取成功",  
      "state":"1",  
      "result":{"name":"工作组1","id":1,"description":"11"}  
  }
  

  //jsonp格式
  callback({  
      "message":"获取成功",  
      "state":"1",  
      "result":{"name":"工作组1","id":1,"description":"11"}  
  })
  

  从格式来看， jsonp 是在 json 的基础上包装了一个方法名，此方法名是前端请求传过来的。

  注意

  jsonp的缺点：

  • JSONP是一种非官方的方法，而且这种方法只支持GET方法，不如POST方法安全。（从实现机制就可明白）。
  • JSONP的实现需要服务器配合，如果是访问的是第三方的服务器，我们没有修改服务器的权限，那么这种方式是不可行的。

2、服务器代理

如果服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，由于跨域是浏览器的同源策略造成的，对于服务器后台不存在该问题，可以在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，然后在返回到test01.html页面。这种方式运用的就是服务器的反向代理技术，控制客户端和服务器的访问都从代理服务器经过，比如用nginx作为服务器代理，在nginx上配置客户端和第三方服务的反向代理，这样就可保证客户端、第三方是同源的了，同一个源，都来自代理服务器。关于 nginx 的反向代理配置，可访问：http://blog.csdn.net/csdn_ds/article/details/58605591

注意

服务器代理的缺点： 开发比较麻烦，对开发环境比较严格，需要在本机上配置代理服务器。

::: info 服务器代理的优点: 完美解决使用jsonp，第三方服务没有修改权限的问题。程序的代码侵入性小，代码级别不需要考虑跨域问题。 :::

3、添加响应头

可以在服务端设置 response header 中 Access-Control-Allow-Origin 字段

addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

在被请求的 Response Header 中加入如下代码：

// 指定允许其他域名访问   
response.setHeader("Access-Control-Allow-Origin", "*");  
// 响应类型   
response.setHeader("Access-Control-Allow-Methods", "POST");  
// 响应头设置   
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

如果所有请求都想让其他域名的服务通过浏览器ajax请求到，可以通过 Filter 统一设置response header。此处说明一下：只设置 Access-Control-Allow-Origin 属性也是可以的。Access-Control-Allow-Origin:* 表示允许任何域名跨域访问，如果需要指定某域名才允许跨域访问，只需把 Access-Control-Allow-Origin:* 改为 Access-Control-Allow-Origin:允许的域名 例如：

response.setHeader("Access-Control-Allow-Origin","http://www.client.com");

注意

缺点： 此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。 设置*，存在安全隐患。

总结

服务代理最好，没有破坏浏览器的安全策略，但这个对开发环境要高一点。设置 response header 的方式，根据具体情况分析，要考虑清楚产品面向的用户。对于 jsonp 这种方式，虽然没有破坏浏览器的安全策略，但只支持 get 方式的请求，有点不能接受，因为 get 传输有参数长度的限制，同时又要考虑传输中文的乱码问题，但如果项目中只是简单的查询、展示，这种方式还是可以考虑的。