引言
跨域产生的原因：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。
例如跨域会报错：
jquery-1.7.2.min.js?t=2017-07-27:4 Failed to load http://b.xxx.com:8081/ajaxB: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.xxx.com:8080’ is therefore not allowed access.
跨域解决方案：
- 使用jsonp解决网站跨域
- 使用HttpClient内部转发
- 使用设置响应头允许跨域
- 基于Nginx搭建企业级API接口网关
- 使用Zuul搭建微服务API接口网关
下面我们使用这五种方案来解决跨域的问题
1.使用JSONP解决网站跨域
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。下面来举个例子：
页面请求（dataType为jsonp）：
function complete() { var data = { "enterprise_id": "8316", "receiver_name": "王敏", "province_code": "110000", "city_code": "110100", "district_code": "110102", "province_name": "北京市", "city_name": "市辖区", "district_name": "西城区", "address": "这里是详细地址", "contact_phone": "13800000000", "default_address": "0" }; $.ajax({ url: "http://usermanage.ylw.com:8080/enterpriseInfo/saveReceiverAddress", data: data, dataType: 'JSONP', jsonp: "callbackSaveAddress", jsonpCallback: "success_jsonp", contentType: "application/json;charset=utf-8", success: function (data) { console.info(data); } }); }
后端代码：
/** * 新增收发货地址信息 * * @return */ @RequestMapping(value = "/saveReceiverAddress") @ResponseBody public String saveReceiverAddress(HttpServletRequest request, @RequestBody UsermanageReceiverAddress usermanageReceiverAddress) { String jsonpCallback = request.getParameter("callbackSaveAddress"); Map<String, Object> resp = new HashMap<String, Object>(); try { //获取用户信息 User user = UsermanageUserUtil.getCurrentUser(request); if (null == user) { resp.put("result", "error"); resp.put("msg", " 未能正常获取登录用户信息!"); logger.info(" 未能正常获取登录用户信息!"); return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")"; } usermanageReceiverAddress.setEnterprise_id(String.valueOf(user.getEnterprise_id())); List<UsermanageReceiverAddress> usermanageReceiverAddressList = userManageEnterpriseService.queryReceiverAddress(String.valueOf(user.getEnterprise_id())); if (null != usermanageReceiverAddressList && usermanageReceiverAddressList.size() >= 10) { resp.put("result", "error"); resp.put("msg", "添加失败，您只能保存10条收发货地址信息!"); logger.info("添加失败，您只能保存10条收发货地址信息!"); return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")"; } //新增地址插入正式表 userManageEnterpriseService.saveAddress(usermanageReceiverAddress); resp.put("result", "success"); resp.put("msg", "地址保存成功!"); return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")"; } catch (Exception e) { logger.error(e.getMessage()); resp.put("result", "error"); resp.put("msg", "地址保存失败!"); return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")"; } }
具体可以参考：https://www.cnblogs.com/xiaoxiaoccaiya/p/7088176.html
2.设置响应头解决网站跨域
主要设置响应头：Access-Control-Allow-Origin
前端代码：
<script type="text/javascript" src="http://www.ylw.com/static/common/jquery-1.7.2.min.js?t=2019-11-26"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type : "GET", async : false, url : "http://b.ylw.com:8081/ajaxB", dataType : "json", success : function(data) { alert(data["errorCode"]); }, error : function() { alert('fail'); } }); }); </script>
后端代码（设置"Access-Control-Allow-Origin", "*"）：
@RequestMapping("/ajaxB") public Map<String, Object> ajaxB(HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); Map<String, Object> result = new HashMap<String, Object>(); result.put("errorCode", "200"); result.put("errorMsg", "登陆成功"); return result; }
3.使用HTTPClient解决网站跨域
前端代码:
<script type="text/javascript" src="http://www.ylw.com/static/common/jquery-1.7.2.min.js?t=2019-11-26"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type : "POST", async : false, url : "http://a.ylw.com:8080/forwardB", dataType : "json", success : function(data) { alert(data["errorCode"]); }, error : function() { alert('fail'); } }); }); </script>
后端代码(A项目进行转发到B项目)：
@RequestMapping("/forwardB") @ResponseBody public JSONObject forwardB() { JSONObject result = HttpClientUtils.httpGet("http://b.ylw.com:8081/ajaxB"); System.out.println("result:" + result); return result; }
后端代码(B项目)：
@RequestMapping("/ajaxB") public Map<String, Object> ajaxB(HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); Map<String, Object> result = new HashMap<String, Object>(); result.put("errorCode", "200"); result.put("errorMsg", "登陆成功"); return result; }
4.基于Nginx API网关解决网站跨域
Nginx相关配置：
server { listen 80; server_name www.ylw.com; ###A项目 location /a { proxy_pass http://a.ylw.com:8080/; index index.html index.htm; } ###B项目 location /b { proxy_pass http://b.ylw.com:8081/; index index.html index.htm; } }
前端代码：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type : "POST", async : false, url : "http://www.ylw.com/b/ajaxB", dataType : "json", success : function(data) { alert(data["errorCode"]); }, error : function() { alert('fail'); } }); }); </script>
后端代码：
@RequestMapping("/ajaxB") public Map<String, Object> ajaxB(HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); Map<String, Object> result = new HashMap<String, Object>(); result.put("errorCode", "200"); result.put("errorMsg", "登陆成功"); return result; }
5.基于SpringCloud 搭建Zuul解决网站跨域
之前写过文章，可以参考：《互联网并发与安全系列教程（15） - 基于Zuul实现API网关》
总结
