什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。

常见解决跨域的方式

script标签
iframe
jsonp
服务端中转请求
cors

cors

全称：Cross-Origin Resource Sharing

中文意思：跨域资源共享

它在维基百科上的定义是：跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。

什么是跨域请求问题？

这个问题的起因在于现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，但是往往给开发带来不便。

但跨域的需求却一直都在，为了跨域，勤劳勇敢的程序猿们想出了许许多多的方法，例如，jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本，而且应用场景也有许多限制，例如jsonP并非XHR，所以jsonP只能使用GET传递参数。

在移动应用风生水起的如今，托HTML5的福，Mobile Web，甚至Hybird App也逐渐火起来，在本地文件系统的Web页面，也有需要获取外部数据的需求，而这些需求也必然是跨域的。同时，HTML5也来带了叫“Cross-Origin Resource Sharing”的新特性，来赋予开发者权力决定资源是否允许被跨域访问。

如何解决？

CORS，CrossOrigin Resources Sharing，也即跨源资源共享，是 HTML5 的一项特性，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告知客户端跨域的限制，如果浏览器支持CORS的话，如果判断Origin通过的话，就会允许XHR进行请求，而不需要再使用jsonP或者代理文件。

使用这个Header返回被允许请求跨域请求的来源域，例如网站duelist.cn设置了下面的Header

Access-Control-Allow-Origin: http://smdcn.net

这样设置之后，通过http://smdcn.net下的页面对于duelist.cn进行ajax请求就会被允许，而其他网站对duelist.cn依旧会被阻拦，通过这种方式网站拥有者可以自己对此进行限制。

当然，如果不想限制来源，可以通过

Access-Control-Allow-Origin: *

来允许任何站点对该资源进行跨域请求
在SpringMVC下的解决方案：

定义SimpleCORSFilter

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
@Component
public class SimpleCORSFilter implements Filter {
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");//所有请求     
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));//cookie共享用这个配置
   response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token"); 
        response.setHeader("Access-Control-Allow-Credentials", "true");//cookie 共享
        response.setHeader("XDomainRequestAllowed","1"); 
    chain.doFilter(req, res);
  }
  public void init(FilterConfig filterConfig) {}
  public void destroy() {}
}

web.xml

<filter>
  <filter-name>cors</filter-name>
  <filter-class>com.app.filter.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

angularjs端代码:

     $http({
  method: "post",
  url: "http://localhost:8080/eifs/usr/login.json",
  data: {para1:"para1",para2:"para2"},
  headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
  }
}).success(function (data) {
}).error(function (data) {
});
$http.get('http://localhost:8080/eifs/usr/login.json', {params:{para1:"para1",para2:"para2"},timeout: 10000})
.success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
//cookie 共享时 配置 withCredentials :true
$http.get("http://127.0.0.1:8080/xxx/syslogin/login?account=%E5%B0%8F%E7%81%B0&password=123456",{withCredentials: true});

java利用cors实现跨域请求

什么是跨域？

常见解决跨域的方式

cors

猜你喜欢