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

最新推荐文章于 2024-06-26 08:30:00 发布

原创最新推荐文章于 2024-06-26 08:30:00 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #java #ajax

技术性同时被 2 个专栏收录

47 篇文章

订阅专栏

javaweb

20 篇文章

订阅专栏

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

首先确定什么是前后端分离，它不仅是对代码的解耦，也是对开发人员的解耦，真正的前端是前端，后台是后台，开发速度至少快一倍。
即你是后台，可以不用写太多前端代码，设计什么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,大概就是这样