10蚂蚁-分布式解决方案——4.彻底解决网站跨域请求

最新推荐文章于 2021-07-01 17:43:45 发布

Jerry_carry

最新推荐文章于 2021-07-01 17:43:45 发布

阅读量230

点赞数

分类专栏：分布式解决方案文章标签：网站跨域

本文链接：https://blog.csdn.net/qq_28461661/article/details/102682805

版权

分布式解决方案专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考网站：https://www.cnblogs.com/rolandlee/p/10767600.html

一个特别方法：在类上添加注解@CrossOrigin

网站跨域解决方案

只有前段才会产生跨域问题（跨域属于浏览器问题）

什么是网站跨域

跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

网站跨域报错案例

jquery-1.7.2.min.js?t=2017-07-27:4 Failed to load http://b.itmayiedu.com:8081/ajaxB: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.itmayiedu.com:8080’ is therefore not allowed access.

五种网站跨域解决方案

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

跨域项目环境搭建

使用JSONP解决网站跨域

前端代码

<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://b.itmayiedu.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();
	}

缺点：不支持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://b.itmayiedu.com:8081/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;
}

response.setHeader(“Access-Control-Allow-Origin”, “*”); 设置响应头允许跨域
如果在实际项目中，该代码建议放在过滤器中。

使用HttpClient进行内部转发

前端代码

<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 : "POST",
			async : false,
			url : "http://a.itmayiedu.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.itmayiedu.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;
	}

搭建企业级API接口网关

使用Nginx搭建API接口网关

Nginx相关配置

  server {
        listen       80;
        server_name  www.itmayiedu.com;

		###A项目
        location /a {
            proxy_pass   http://a.itmayiedu.com:8080/;
            index  index.html index.htm;
        }
		###B项目
		 location /b {
            proxy_pass   http://b.itmayiedu.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.itmayiedu.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;
	}

SpringCloud搭建API接口网关

使用SpringCloud Zuul搭建API接口网关

Maven初始化依赖参数

<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.0.RELEASE</version>
	</parent>
	<dependencies>
		<!-- SpringBoot 对lombok 支持 -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>

		<!-- SpringBoot web 核心组件 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
		</dependency>
		<!-- SpringBoot 外部tomcat支持 -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>

		<!-- springboot-log4j -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-log4j</artifactId>
			<version>1.3.8.RELEASE</version>
		</dependency>
		<!-- springboot-aop 技术 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.47</version>
		</dependency>
	</dependencies>

application.yml

server:
  port: 8080
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

HttpClientUtils工具类

public class HttpClientUtils {
	private static Logger logger = LoggerFactory.getLogger(HttpClientUtils.class); // 日志记录

	private static RequestConfig requestConfig = null;

	static {
		// 设置请求和传输超时时间
		requestConfig = RequestConfig.custom().setSocketTimeout(2000).setConnectTimeout(2000).build();
	}

	/**
	 * post请求传输json参数
	 * 
	 * @param url
	 *            url地址
	 * @param json
	 *            参数
	 * @return
	 */
	public static JSONObject httpPost(String url, JSONObject jsonParam) {
		// post请求返回结果
		CloseableHttpClient httpClient = HttpClients.createDefault();
		JSONObject jsonResult = null;
		HttpPost httpPost = new HttpPost(url);
		// 设置请求和传输超时时间
		httpPost.setConfig(requestConfig);
		try {
			if (null != jsonParam) {
				// 解决中文乱码问题
				StringEntity entity = new StringEntity(jsonParam.toString(), "utf-8");
				entity.setContentEncoding("UTF-8");
				entity.setContentType("application/json");
				httpPost.setEntity(entity);
			}
			CloseableHttpResponse result = httpClient.execute(httpPost);
			// 请求发送成功，并得到响应
			if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
				String str = "";
				try {
					// 读取服务器返回过来的json字符串数据
					str = EntityUtils.toString(result.getEntity(), "utf-8");
					// 把json字符串转换成json对象
					jsonResult = JSONObject.parseObject(str);
				} catch (Exception e) {
					logger.error("post请求提交失败:" + url, e);
				}
			}
		} catch (IOException e) {
			logger.error("post请求提交失败:" + url, e);
		} finally {
			httpPost.releaseConnection();
		}
		return jsonResult;
	}

	/**
	 * post请求传输String参数 例如：name=Jack&sex=1&type=2
	 * Content-type:application/x-www-form-urlencoded
	 * 
	 * @param url
	 *            url地址
	 * @param strParam
	 *            参数
	 * @return
	 */
	public static JSONObject httpPost(String url, String strParam) {
		// post请求返回结果
		CloseableHttpClient httpClient = HttpClients.createDefault();
		JSONObject jsonResult = null;
		HttpPost httpPost = new HttpPost(url);
		httpPost.setConfig(requestConfig);
		try {
			if (null != strParam) {
				// 解决中文乱码问题
				StringEntity entity = new StringEntity(strParam, "utf-8");
				entity.setContentEncoding("UTF-8");
				entity.setContentType("application/x-www-form-urlencoded");
				httpPost.setEntity(entity);
			}
			CloseableHttpResponse result = httpClient.execute(httpPost);
			// 请求发送成功，并得到响应
			if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
				String str = "";
				try {
					// 读取服务器返回过来的json字符串数据
					str = EntityUtils.toString(result.getEntity(), "utf-8");
					// 把json字符串转换成json对象
					jsonResult = JSONObject.parseObject(str);
				} catch (Exception e) {
					logger.error("post请求提交失败:" + url, e);
				}
			}
		} catch (IOException e) {
			logger.error("post请求提交失败:" + url, e);
		} finally {
			httpPost.releaseConnection();
		}
		return jsonResult;
	}

	/**
	 * 发送get请求
	 * 
	 * @param url
	 *            路径
	 * @return
	 */
	public static JSONObject httpGet(String url) {
		// get请求返回结果
		JSONObject jsonResult = null;
		CloseableHttpClient client = HttpClients.createDefault();
		// 发送get请求
		HttpGet request = new HttpGet(url);
		request.setConfig(requestConfig);
		try {
			CloseableHttpResponse response = client.execute(request);

			// 请求发送成功，并得到响应
			if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
				// 读取服务器返回过来的json字符串数据
				HttpEntity entity = response.getEntity();
				String strResult = EntityUtils.toString(entity, "utf-8");
				// 把json字符串转换成json对象
				jsonResult = JSONObject.parseObject(strResult);
			} else {
				logger.error("get请求提交失败:" + url);
			}
		} catch (IOException e) {
			logger.error("get请求提交失败:" + url, e);
		} finally {
			request.releaseConnection();
		}
		return jsonResult;
	}

}

A.Jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<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.itmayiedu.com/b/ajaxB",
			dataType : "json",
			success : function(data) {
				alert(data["errorCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>
</head>
<body>显示 ....
</body>
</html>

Jerry_carry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
10蚂蚁-分布式解决方案——4.彻底解决网站跨域请求

网站跨域解决方案只有前段才会产生跨域问题（跨域属于浏览器问题）什么是网站跨域跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。网站跨域报错案例jquery-1.7.2.min.js?t=2017-07-27:4 Failed to load http://b.itmayiedu.com:8081/ajaxB: No ‘Access-Control-Allow-O...
复制链接

扫一扫

专栏目录