java配合前端实现跨域

来源：互联网发布：splice js循环编辑：程序博客网时间：2024/04/29 22:01

后台代码:

前端服务器端口为8082

import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;@RestControllerpublic 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的实现原理底层还是和第二种一致的

阅读全文

0 0