后台代码
package edu.nf.ch01.server; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @Author Eric * @Date 2018/12/3 */ @WebServlet("/login") public class CorsServer extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { /* //允许跨域访问，通过response对象写回一些跨域访问的头信息 resp.setHeader("Access-Control-Allow-Origin","*"); //允许请求的方法 resp.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE"); */ String userName = req.getParameter("userName"); String password = req.getParameter("password"); resp.setContentType("text/html;charset=utf-8"); if("admin".equals(userName) && "123".equals(password)){ resp.getWriter().println("success"); }else{ resp.getWriter().println("fail"); } } }
html
<!DOCTYPE html> <html> <meta charset="utf-8"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <head> <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'> <span class="icon icon-left"></span> 返回 </a> <h1 class="title">我的App</h1> </head> <body> <nav class="bar bar-tab"> <a class="tab-item active" href="#"> <span class="icon icon-home"></span> <span class="tab-label">首页</span> </a> <a class="tab-item" href="#"> <span class="icon icon-me"></span> <span class="tab-label">我</span> </a> <a class="tab-item" href="#"> <span class="icon icon-star"></span> <span class="tab-label">收藏</span> </a> <a class="tab-item" href="#"> <span class="icon icon-settings"></span> <span class="tab-label">设置</span> </a> </nav> <div class="content"> <div class="list-block"> <form id="f1"> <ul> <!-- Text inputs --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">Name</div> <div class="item-input"> <input type="text" name="userName" placeholder="Your name"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">Password</div> <div class="item-input"> <input type="password" name="password" placeholder="password"> </div> </div> </div> </li> </ul> </form> </div> <div class="content-block"> <div class="row"> <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div> <div class="col-50"><a href="#" id="login" class="button button-big button-fill button-success">登陆</a></div> </div> </div> </div> </body> <script> $(function(){ $("#login").on("click",function(){ $.ajax({ type:"post", url:"http://localhost:8080/login", data:$("#f1").serialize(), success:function(result){ alert(result); } }); }); }); </script> </html>
可以用Filter-CorsFilter类
package edu.nf.ch01.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @author wangl * @date 2018-12-03 */ @WebFilter("/*") public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse resp = (HttpServletResponse) servletResponse; //允许跨域访问，通过response对象写回一些跨域访问的头信息 resp.setHeader("Access-Control-Allow-Origin","*"); //允许请求的方法 resp.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE"); //放行 filterChain.doFilter(servletRequest, servletResponse); } @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void destroy() { } }