Ajax跨域的简单实现

最新推荐文章于 2024-03-29 02:24:34 发布

佳亮

最新推荐文章于 2024-03-29 02:24:34 发布

阅读量203

点赞数

分类专栏： javaweb 文章标签：跨域 springboot ajax

本文链接：https://blog.csdn.net/zahngjialiang/article/details/88566772

版权

javaweb 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1.跨域的由来

因为javascript的同源策略，js只能访问同域的资源。所谓同域，就是指域名，端口，协议必须相同。简而言之，javascript只能访问同一个服务器下的资源，不能直接访问别人服务器的资源。但是在一些操作中，必须访问其他服务器的资源，比如单点登录。这样就必须想法绕过浏览器的限制，于是就有了很多的跨域技术的出现。

2.使用jsonp

jsonp是对json的一种扩展。使用jsonp，返回的数据是script脚本数据，而浏览器是允许跨域获取脚本数据的，这样就可以绕过浏览器的限制。

但jsonp有很多的弊端:

jsonp只支持get请求，不支持常见的post请求以及其他请求。
需要修改服务端代码，客户端注册callback。
发送的不是XHR请求。

3.使用Filter

修改被调用方，添加一些参数作为标志，在响应头添加字段。这样会限制浏览器检查请求。

关于Filter具体的实现，网上有很多例子，这里不赘述。

4.修改调用方

使用反向代理技术，比如Nginx以及Apache。

5.使用Spring注解

这种方式最简单。

创建两个项目，一个项目是ajaxclient，一个项目是ajaxserver，两个端口不一样。

需要实现ajaxclient中的index页面访问ajaxserver中的controller。

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<button type="button" onclick="ajaxClick()">按钮</button>
</body>
<script>
    function ajaxClick() {
        $.ajax({
        url:"http://localhost:8080/ajax/get1/",
        type:"get",
        success:function(result){
            alert(result.data);
        }
    });
    }

</script>
</html>

ajaxserver中的controller以及model类

public class ResultBean {
    private String data;

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }

    public ResultBean(String data) {
        this.data = data;
    }
}

@RestController
@RequestMapping("/ajax")
@CrossOrigin
public class AjaxController {

    @RequestMapping("/get1")
    public ResultBean get1() {
        return new ResultBean("java");
    }

}

注意@CrossOrigin注解

在ajaxclient的index页面上，点击按钮，发送ajax请求，ajaxserver中的contr收到请求，返回json格式的数据。然后在页面上alert数据。