如何解决ajax跨域访问的问题！

最新推荐文章于 2023-10-09 12:40:51 发布

原创最新推荐文章于 2023-10-09 12:40:51 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍并演示了三种解决Ajax跨域访问的方法：利用jsonp实现跨域、服务器端放开访问权限以及使用filter全面放开访问权限。每种方法均有具体代码示例，包括前端js与后端java代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何解决ajax跨域访问的问题！

在这里我有三种方式可以解决跨域访问的问题；
第一种方法是:jsonp实现ajax跨域访问
下面直接上代码：
示例如下：
html代码：

<body>
    <input type="button" "testJsonp();" value="TestJsonP">
</body>

js代码：

function testJsonp(){
    $.ajax({
        type : 'GET',
        dataType : 'jsonp', // 数据类型配置成jsonp
        jsonp : "callback", //配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象
        url : 'http://127.0.0.1:8001/test', //服务路径
        async : false,
        data: {
            "type":'0',
        },
        success : function (response) {
            if(response.code == 200){
                alert('返回成功！');
            }else{
                alert('服务器异常！');
            }
        },
        error : function (){
            alert('服务器异常！');
        }
    });
}

java代码：

@RequestMapping(value = "/test", method = RequestMethod.GET)
    public @ResponseBody String testJsonp(@RequestParam(value = "type", defaultValue = "") String type, String callback) {
        RequestResult data = new RequestResult(); // 配置需要返回的结果
        data.setCode(200);
        data.setMessage("success");
        // 接收参数callback名称需要与js中配置的jsonp标签名一致
        String result = callback+"("+JSONObject.fromObject(data).toString()+")";//拼接可执行的js
        return result;
    }

在这种方法中我们还要注意以下几点：
1. jsonp只支持GET方式的请求，无论ajax中的type配置成何种方式，都会在默认以GET方式发送请求。无法满足restful方式的请求。
2. ajax中的jsonp的标签名要与服务端的接收标签参数一致。本例中都设置为’callback’.
3. 若想传递一个json格式的js对象到服务器，可以使用JSON.stringify()方法将js对象转化为json字符串，赋值到某个变量。在服务器端获取这个变量的值通过json工具，将该字符串转化为java对象。