6、CORS支持，什么是跨域？跨域怎么解决？jsonp、CROS，完成的跨域流程，跨域测试。Springboot解决跨域

最新推荐文章于 2024-10-11 13:00:00 发布

Sai_BAN

最新推荐文章于 2024-10-11 13:00:00 发布

阅读量6.1k

点赞数 4

分类专栏：骗浏览量文章标签： java ajax ajax跨域问题 jsonp spring boot

本文链接：https://blog.csdn.net/Sai_BAN/article/details/116451236

版权

骗浏览量专栏收录该内容

23 篇文章 0 订阅

订阅专栏

6. CORS支持

6.1、什么是跨域？

如果一个服务是91端口，这个服务又调用其他的服务。而这个服务是90端口，这就会出现跨域

6.2、跨域怎么解决？

1、jsonp，

缺点：只支持Get，而且是把远程的函数拉过来本地运行。和开发流程不符合。所以最好使用CROS

2、CROS

比如：

对8080：当前服务是在8080端口，而我的前端想访问8081端口里的服务（添加、删除），请求8081

对8081：如果8081端口的服务里这两个方法没有开启跨域支持8080，那么就会访问失败（没有解决跨域）

总结，当8080端口的前端页面需要去8081端口拿数据（而不是8080自身），就会出现跨域。解决办法是让8081端口允许被跨域。

注意：跨域指的不是自身前端页面解决，而是被请求的后端资源去解决。被请求的服务要允许自己被其他人访问，而不是仅仅是自身才能访问。

服务端支持跨域

完整的跨域流程

跨域解决

有两种办法：一种在方法上加@CrossOrigin、一种在全局进行配置

下面创建两个工程

8081工程提供后端服务。这里配置跨域，表示自己的资源可以被跨域取到。

8080工程负责前端请求。这里发起ajax请求，去拿8081端口的服务。

8081工程：这里是写在了方法上。

@RestController
@RequestMapping("/book")
public class CROSController {

    @PostMapping("/")
    @CrossOrigin(value="http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
    public String addBook(String name) {
        return "receive:"+name;
    }

    @DeleteMapping("/{id}")
    @CrossOrigin(value="http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
    public String deleteById(@PathVariable Long id) {
        return String.valueOf(id);
    }
}

还可以写在全局中

@Configuration
public class MyWebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/book/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("http://localhost:8080");
    }
}

配置文件把端口改成8081

8080工程：

resources/static文件下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    </script>
</head>
<body>
<div id="contentDiv"></div>
<div id="deleteResult"></div>
<input type="button" value="提交数据" onclick="getData()"><br>
<input type="button" value="删除数据" onclick="deleteData()"><br>
<script>
    function deleteData() {
        $.ajax({
            url: 'http://localhost:8081/book/99',
            type: 'delete',
            success: function(msg) {
                $("#deleteResult").html(msg);
            }
        })
    }

    function getData() {
        $.ajax({
            url: 'http://localhost:8081/book/',
            type: 'post',
            data: {name: '三国演义'},
            success: function(msg) {
                $("#contentDiv").html(msg);
            }
        })
    }
</script>
</body>
</html>