不在同服务器访问就会产生跨域（用其他软件编写HTML测试）
后台Controller
package edu.nf.ch02.controller; import org.springframework.web.bind.annotation.*; /** * @Author Eric * @Date 2018/12/3 */ @RestController @RequestMapping("/app") /** * origins = "*" 参数是个数组{"1","2"} * 标注在方法上时表示当前的请求处理方法支持跨域，但会合并属性配置 * 注意，这种方式的配置只对当前类有效，对其他的Controller是不起作用的， * 如果需要所有的Controller都支持跨域访问，那么可以配置全局的跨域访问 * （通过xml或者是java配置） */ //@CrossOrigin(origins = "*",methods = {RequestMethod.GET,RequestMethod.POST}) public class CorsController { @PostMapping("/login") public String login(String userName,String password){ if("admin".equals(userName) && "123".equals(password)){ return "success"; }else { return "fail"; } } }
dispatcher.servlet.xml设置全局配置（记得配置web.xml）
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <context:component-scan base-package="edu.nf.ch02"/> <mvc:annotation-driven/> <mvc:default-servlet-handler/> <!--全局的跨域配置--> <mvc:cors> <!-- /** 表示所有请求都将支持跨域方法 --> <mvc:mapping path="/**" allowed-origins="*" allowed-methods="GET,POST,PUT,DELETE"/> </mvc:cors> </beans>
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/app/login", data:$("#f1").serialize(), success:function(result){ alert(result); } }); }); }); </script> </html>