java配合前端实现跨域

系统管理员 2021-06-24 15:57 329阅读 0赞

后台代码:

前端服务器端口为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: "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 () {  $("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的实现原理底层还是和第二种一致的