Ajax之跨域问题

跨域问题

跨域:浏览器有一个规定,在不同的域名下访问,Ajax回调函数会被拒绝执行。
跨域常见的解决方案:
1、服务器端在响应头中设置运行跨域即可。(适合小型企业使用)
2、使用jsonp完成跨域。(不建议使用,因为jsonp只支持get请求)
3、搭建网管系统,使用nigix来进行代理。(适合大型企业使用)
4、在本地服务器中,通过httpclient来发送请求,那么浏览器接收数据就是在同一域名下了。(不建议使用,虽然安全性较高,但是非常占用带宽资源)

演示跨域问题

在这里插入图片描述

解决办法(使用设置响应头和jsonp来讲解跨域问题)

1、在服务器端设置响应头

/**
 * 服务器B中的跨域类
 * @author 紫炎易霄
 */
@WebServlet("/crossServlet")
public class CrossServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=utf-8");
		//接收参数
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		System.out.println(username+"----"+password);
		resp.setHeader("Access-Control-Allow-Origin", "*");
		resp.getWriter().write("回调成功!");
	}
}

运行结果
在这里插入图片描述
2、使用jsonp解决跨域
一、jsp代码

<script type="text/javascript">
	$(function(){
		$.ajax({
	        type:"get",
	        url:"http://www.bbb.com/serverB/crossServlet",
	        dataType:"jsonp",
			jsonp:"jsonpCallback",
			data:"username=紫炎易霄&password=123456",
	        success:function(data){
				alert(data.result);
	        },
		});
	})
</script>

二、服务器端代码

/**
 * 服务器B中的跨域类
 * @author 紫炎易霄
 */
@WebServlet("/crossServlet")
public class CrossServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=utf-8");
		//接收参数
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		System.out.println(username+"----"+password);
		//接收jsonpCallback
		String jsonpCallback = req.getParameter("jsonpCallback");
		System.out.println(jsonpCallback);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("result", "紫炎易霄回来了!");
		resp.getWriter().write(jsonpCallback+"("+jsonObject.toJSONString()+")");
	}
}

运行结果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值