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

一、使用JSONP

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

• dataType : "jsonp"
• jsonp : "jsonpCallback"
• type : "GET"
  如下：

<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>

后台代码

• jsonpCallback 为jsonp生成的参数

@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();
		//需要把jsonp生成的参数带回前台，jsonp才能解析
		writer.print(jsonpCallback + "(" + root.toString() + ")");
		writer.close();
	}

二、设置Header响应头

• 设置响应头允许跨域 （ * 表示所有请求允许跨域）
• response.setHeader(“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;
}

三、HttpClient 转发

HttpClient 请求具体逻辑，maven依赖可看：
https://blog.csdn.net/qq_41463655/article/details/89637160

• A项目进行转发到B项目（A项目等于前台项目要访问的服务器）

@RequestMapping("/forwardB")
	@ResponseBody
	public JSONObject forwardB() {
		JSONObject result = HttpClientUtils.httpGet("http://b.itmayiedu.com:8081/ajaxB");
		System.out.println("result:" + result);
		return result;
	}

• B项目（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;
	}

四、Nginx搭建API接口网关

• 访问 www.baidu.com/a 走A 项目同 http://a.baidu.com:8080/
• 访问 www.baidu.com/b 走B 项目同 http://b.baidu.com:8081/
• 两个项目都在同一个域名下 www.baidu.com，不会存在跨域问题

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

		###A项目
        location /a {
            proxy_pass   http://a.baidu.com:8080/;
            index  index.html index.htm;
        }
		###B项目
		 location /b {
            proxy_pass   http://b.baidu.com:8081/;
            index  index.html index.htm;
        }
    }

• 个人开源项目（通用后台管理系统）–> https://gitee.com/wslxm/spring-boot-plus2 , 喜欢的可以看看

• 本文到此结束，如果觉得有用，动动小手点赞或关注一下呗，将不定时持续更新更多的内容…，感谢大家的观看！