引言
跨域产生的原因：在当前域名请求网站中，默认不允许通过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 resp = new HashMap();
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 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
前端代码：
$(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');
}
});
});
后端代码（设置"Access-Control-Allow-Origin", "*"）：
@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;
}
前端代码:
$(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');
}
});
});
后端代码(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 ajaxB(HttpServletResponse response) {
response.setHeader("Access-Control-Allow-Origin", "*");
Map result = new HashMap();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
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;
}
}
前端代码：
$(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');
}
});
});
后端代码：
@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;
}
之前写过文章，可以参考：《互联网并发与安全系列教程（15） - 基于Zuul实现API网关》
总结
