web安全之解决网站跨域问题方案

跨域产生的原因呢,主要是前端请求的域名或者是端口和浏览器地址栏的域名或者端口不一致产生的,因为浏览器的同源策略是禁止,不相同的域名或者端口在该站点访问.这就是跨域问题的由来

 

解决跨域问题的方案,这里将介绍五种跨域解决方案.

1. 使用jsonp解决网站跨域 
2.使用HttpClient内部转发
3.使用设置响应头允许跨域
4.基于Nginx搭建企业级API接口网关
5.使用Zuul搭建微服务API接口网关

 

jsonp解决网站跨域

jsonp解决跨域问题其实是不推荐的,因为jsonp解决跨域较为繁琐,并且灵活性能差,只支持get请求跨域,但是post请求却失效,是一种比较低级比较古老的做法.下图是使用方法:

前端代码:

<script type="text/javascript" src="http://www.itmayiedu.com/static/common/jquery-1.7.2.min.js?t=2017-07-27">script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type : "GET", async : false, url : "http://www.test.com:8081/ajaxB", dataType : "jsonp", jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数 success : function(data) { alert(data["errorCode"]); }, error : function() { alert('fail'); } });   }); script>

 

后端代码:

@RequestMapping(value = "/ajaxB", method = RequestMethod.GET) public void ajaxB(HttpServletResponse response, String jsonpCallback) throws IOException { JSONObject root = new JSONObject(); root.put("errorCode", "200"); root.put("errorMsg", "登陆成功"); response.setHeader("Content-type", "text/html;charset=UTF-8"); PrintWriter writer = response.getWriter(); writer.print(jsonpCallback + "(" + root.toString() + ")"); writer.close(); }

 

参照此代码可解决get请求跨域问题.

 

使用HttpClient内部转发

HttpClient去解决跨域问题也是极端不推荐的行为,通常做法是前端去请求浏览器同源服务器,同源服务器再使用HtppClient作为客户端去进行转发请求到目标服务器,返回结果后再返回给前端,性能极差.

 

 

使用设置响应头允许跨域

在服务器中设置响应头允许跨域是一种可以推荐的做法

@RequestMapping("/ajaxB") public Map ajaxB(HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); Map result = new HashMap(); result.put("errorCode", "200"); result.put("errorMsg", "登陆成功"); return result; }

response.setHeader("Access-Control-Allow-Origin", "*"); 设置响应头允许跨域

如果在实际项目中，该代码建议放在过滤器中。

 

 

基于Nginx搭建企业级API接口网关

该方法是许多互联网企业的使用方法,对前端请求的域名和路径做反向代理,不会暴露服务器的真实ip和端口,安全性能高,可扩展性好.

通过修改nginx的conf目录下的nginx.conf文件来实现监听对应域名的请求,进行反向代理到目标服务器.可以实现浏览器下同源域名的请求.\

 

 

使用Zuul搭建微服务API接口网关

在springcloud微服务项目中,对应前端的请求通常都是由zuul网关来进行代理转发,所以基本不存在跨域问题了,这里只是简单提一下就不介绍了