网站跨域解决方案

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

网站跨域报错案例

jquery-1.7.2.min.js?t=2017-07-27:4 Failed to load http://b.test.com:8081/ajaxB: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.test.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.test.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.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();
}

缺点：不支持post请求，代码书写比较复杂

使用设置响应头允许跨域

前端代码

<script type="text/javascript"
	src="http://www.test.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.test.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.test.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.test.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.test.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.test.com;

	###A项目
    location /a {
        proxy_pass   http://a.test.com:8080/;
        index  index.html index.htm;
    }
	###B项目
	 location /b {
        proxy_pass   http://b.test.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.test.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.test.com/b/ajaxB",
			dataType : "json",
			success : function(data) {
				alert(data["errorCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>
</head>
<body>
</body>
</html>