接口跨域访问完全解决方案(java五种跨域解决方案)

本文详细介绍了五种解决跨域问题的方法:使用JSONP、设置响应头、使用HttpClient内部转发、基于Nginx搭建API接口网关及使用Zuul搭建微服务API接口网关(未详述)。每种方法都附带了具体实现代码,如JSONP的前端与后端代码、设置响应头的示例、HttpClient转发的请求逻辑等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 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;
        }
    }
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值