由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策略。那么什么是同源呢?所谓的同源是指三个方面“相同”:
- 域名相同
- 协议相同
- 端口相同
下面就举几个例子来帮助更好的理解同源策略。
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js | 同一域名 | 允许 |
http://www.a.com/a.js http://www.b.com/a.js | 不同域名 | 不允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名不同端口 | 不允许 |
https://www.a.com/a.js http://www.a.com/b.js | 同一域名不同协议 | 不允许 |
1.nginx配置文件解决
location /compet-biz-trade {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'OPTION, POST, GET';
add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type,authorization';
proxy_pass http://127.0.0.1:8011/compet-biz-trade;
}
主要是添加:
add_header 'Access-Control-Allow-Origin' '*';
Access-Control-Allow-Origin这个Header在W3C标准里用来检查该跨域请求是否可以被通过,如果值为*则表明当前页面可以跨域访问。默认的情况下是不允许的。
但是,如果程序猿偷懒将Access-Control-Allow-Origin设置为:Access-Control-Allow-Origin: * 允许任何来自任意域的跨域请求,那么就存在被 DDoS攻击的可能。
2.自己写filter类,添加头部信息Access-Control-Allow-Origin: * ,在业务项目中配置web.xml 中配置想要的xml 文件
public class CorsFilter implements Filter{
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,
ServletException {
// TODO Auto-generated method stub
HttpServletResponse res = (HttpServletResponse) response;
res.setContentType("text/html;charset=UTF-8");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
res.setHeader("Access-Control-Max-Age", "0");
res.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");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("XDomainRequestAllowed","1");
chain.doFilter(request, response);
}
@Override
public void destroy() {
// TODO Auto-generated method stub
}
}
web.xml的配置
- <filter>
- <filter-name>cors</filter-name>
- <filter-class>com.tianlong.common.base.CorsFilter</filter-class>
- </filter>
- <filter-mapping>
- <filter-name>cors</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
3.直接在tomcat安装目录下的lib中添加cors-filter-1.7.jar,java-property-utils-1.9.jar 这2个jar包,并且在业务项目的web.xml 中配置想要应的filter配置文件:
- <filter>
- <filter-name>CORS</filter-name>
- <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
- <init-param>
- <param-name>cors.allowOrigin</param-name>
- <param-value>*</param-value>
- </init-param>
- <init-param>
- <param-name>cors.supportedMethods</param-name>
- <param-value>GET,POST,HEAD,PUT,DELETE</param-value>
- </init-param>
- <init-param>
- <param-name>cors.supportedHeaders</param-name>
- <param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
- </init-param>
- <init-param>
- <param-name>cors.exposedHeaders</param-name>
- <param-value>Set-Cookie</param-value>
- </init-param>
- <init-param>
- <param-name>cors.supportsCredentials</param-name>
- <param-value>true</param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>CORS</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
参考文章:
http://blog.csdn.net/poisions/article/details/51459307
http://www.cnblogs.com/ciscoo/p/6412731.html
http://xieyufei.com/2016/05/28/Java-Ajax.html
http://www.cnblogs.com/fengli9998/p/6145717.html