java跨域请求,且附上前端跨域请求代码

为了跟上新的潮流,学习前后端分离的概念及技术是必须的,跨域也随之而产生。

首先确定什么是前后端分离,它不仅是对代码的解耦,也是对开发人员的解耦,真正的前端是前端,后台是后台,开发速度至少快一倍。
即你是后台,可以不用写太多前端代码,设计什么ui等等,都交给了前端人员,
前端人员也是如此。

说到底,还是有人关心在这种模式该使用什么数据格式通信,无疑是json.
在此之后随之而来的是很多的跨域问题。

首先跨域请求需要一些关于计算机网络的知识补充,你需要在请求中设置一些特殊信息来规定怎么跨域。

关于域的同源与不同源:
通过协议(http,https),ip,port,三者两两组合每一个为一种情况,每一种都是不同源,
仅者都相同时才是同源。

关于常见跨域的方式简介:
cors与jsonp

介绍几个关于response的header信息:

请求协议作用
Access-Control-Allow-Headers允许哪个地址访问,可以设参数任何即*,或者某一特定http://ip:port,必须
Access-Control-Allow-Credentials设为参数布尔值true,允许携带cookies,必须
Access-Control-Max-Age是否在下次请求时缓存上次的请求结果,参数为时间ms
Access-Control-Allow-Methods允许那些形式的请求方法通过,例如get,post…

加一段服务端java的filter代码:

	// 简单Accept, Accept-Language, Content-Language, Content-Type与不简单请求
		// Accept
		// Accept-Language
		// Content-Language
		// Last-Event-ID
		// Content-Type,但仅能是下列之一
		// application/x-www-form-urlencoded
		// multipart/form-data
		// text/plain
		// response2.setHeader("Access-Control-Allow-Headers", "Content-Type:");
		// 请求最大连接时长,不需要再发送预检验请求,可以缓存该结果
		// response2.setHeader("Access-Control-Max-Age", "300");
		// 统一utf-8
		//response2.setHeader("Content-Type", "application/json");
		// 允许所有域的访问
		response2.setHeader("Access-Control-Allow-Origin", "http://localhost:5501");
		// 允许携带cookies
		response2.setHeader("Access-Control-Allow-Credentials", "true");

再加一段前端的跨域ajax请求代码:

   $.ajax({
                    type: 'post',
                    url: 'index/selectAllByPage.action',
                    data: {
                        'limit': limit,
                        'page': obj.curr
                            //Math.floor(count/10)
                    },
                    xhrFields: {
                            withCredentials: true
                        },
                    dataType: 'json',
                    success: function(result) {
                        if (result === "") {
                            $('#index_comment').append("请求错误!");
                            return false;
                        }
                        });
                    }
                });

其中:

xhrFields: {
                            withCredentials: true
                        },

很重要,是ajax跨域的条件之一,不然不能提交数据

ok,大概就是这样

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值