跨域解决方案以及重复提交解决方案
跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名
解决方案
使用后台response添加header
后台response添加header，response.setHeader("Access-Control-Allow-Origin", "*"); 支持所有网站
使用JSONP
|
$.ajax({ type : "POST", async : false, url : "http://a.a.com/a/FromUserServlet?userName=张三", dataType : "jsonp",//数据类型为jsonp jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数 success : function(data) { alert(data.result); }, error : function() { alert('fail'); } }); |
jquery 中jsonp的实现原理
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。
当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get ！
示例：
$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: {
'action': 'aaron'
},
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。
使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去
（在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）
后端代码:
|
@WebServlet("/FromUserServlet") publicclass FromUserServlet extends HttpServlet {
@Override protectedvoid doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); }
@Override protectedvoid doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setCharacterEncoding("UTF-8"); // resp.setHeader("Access-Control-Allow-Origin", "*"); String userName = req.getParameter("userName"); String userAge = req.getParameter("userAge"); System.out.println(userName + "----" + userAge+"---"+req.getMethod()); // JSONObject JSONObject1 = new JSONObject(); // JSONObject1.put("success", "添加成功!"); // resp.getWriter().write("callbackparam(" + JSONObject1.toJSONString() // + ")");
try { resp.setContentType("text/plain"); resp.setHeader("Pragma", "No-cache"); resp.setHeader("Cache-Control", "no-cache"); resp.setDateHeader("Expires", 0); PrintWriter out = resp.getWriter(); JSONObject resultJSON = new JSONObject(); // 根据需要拼装json resultJSON.put("result", "content"); String jsonpCallback = req.getParameter("jsonpCallback");// 客户端请求参数 out.println(jsonpCallback + "(" + resultJSON.toJSONString() + ")");// 返回jsonp格式数据 out.flush(); out.close(); } catch (Exception e) { // TODO: handle exception } } }
|
JSONP的优缺点:
JSONP只支持get请求不支持psot请求
后台Http请求转发
使用HttpClinet转发进行转发
使用接口网关
使用nginx转发。
使用SpringCloud网关
表单重复提交解决方案(防止Http重复提交）
发生场景
网络延时
在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。
重新刷新
表单提交后用户点击【刷新】按钮导致表单重复提交
点击浏览器的【后退】按钮回退到表单页面后进行再次提交
用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交
解决方案
使用javascript 解决
既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，
除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮
使用后端提交解决
在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
- 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
- 当前用户的Session中不存在Token(令牌)。
- 用户提交的表单数据中没有Token(令牌)。
如何防止别人模拟请求？
使用令牌token解决模拟请求 好处是 唯一性只能有一次请求
如何拿到如何生成token 改如何防止呢？
使用验证码(防止非人工)
