java配合前端实现跨域

后台代码:

前端服务器端口为8082

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

@RestController
public class AjaxTest {
    @RequestMapping(value = "AjaxTest")
    public String getMobileAuthCode(HttpServletRequest request, String callback1, String op)
            throws Exception {
        String result = "";
        if (op.equals("1")) {
            result = "{'result':'mzd跨域成功'}";
        }
        result = callback1 + "(" + result + ")";
        return result;
    }
}

一、java+ajax+jsonp实现跨域:

前台代码:

前端服务器端口为8080

<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: 'http://localhost:8082/AjaxTest',
                type: 'post',
                dataType: 'jsonp',
               <!--如果jsonp中的参数不指定，则默认的是callback，即后台参数需要指定为callback，如果jsonp中指定参数，则jsonp中的参数需要和后台参数保持一致，就相当于安全认证，参数一致表示允许跨域请求接口-->
                jsonp: "callback1",
                data: {
                    "op": '1',
                },
                success: function (data) {
                    $("#a").html(data.result);
                },
                error: function (data) {
                    alert("跨域失败")
                }
            });
        })
    </script>
</head>
<body>
<div id="a"></div>
</body>
</html>

二、java+头部append一个脚本发起跨域请求：

前台代码:

前端服务器端口为8080

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
    <script>
        function showData(data) {
            $("#b").val(data.result);
        }

        $(function () {
            $("#a").click(function () {
            <!--在script里面指定回调函数名字，后台参数要和这个回调函数名字保持一致-->
                $("head").append("<script src='http://localhost:8082/AjaxTest?op=1&callback1=showData'><\/script>");
            });
        })
    </script>
</head>
<body>
<input id="a" type="button" value="跨域请求"/>
<input id="b"/>
</body>
</html>

注意：

无论是第一种还是第二种实现的跨域，其实现的原理都是get请求，虽然第一种指明了 type: ‘post’，即指明了post请求，但是还会被转换为get请求（不信你可以将后台的请求设置为只允许post请求：@RequestMapping(value = “AjaxTest”,method = RequestMethod.POST)，看看还能否跨域），因为jsonp的实现原理底层还是和第二种一致的

java配合前端实现跨域

猜你喜欢