分布式系列教程（16） - 解决网站跨域的问题

最新推荐文章于 2023-05-17 17:13:37 发布

杨林伟

最新推荐文章于 2023-05-17 17:13:37 发布

阅读量496

点赞数 2

分类专栏： # 分布式

本文链接：https://blog.csdn.net/qq_20042935/article/details/103242735

版权

分布式专栏收录该内容

46 篇文章 16 订阅

订阅专栏

引言

跨域产生的原因：在当前域名请求网站中，默认不允许通过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网关》

总结

在这里插入图片描述

杨林伟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分布式系列教程（16） - 解决网站跨域的问题

引言跨域产生的原因：在当前域名请求网站中，默认不允许通过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 ...
复制链接

扫一扫