SpringMCV跨域 - 诉说静风

不在同服务器访问就会产生跨域（用其他软件编写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>

posted on 2018-12-11 16:01 诉说静风阅读(212) 评论(0) 收藏举报

刷新页面返回顶部