在 SpringBoot 中设置允许跨域请求

最新推荐文章于 2024-07-06 20:36:20 发布

IT小村

最新推荐文章于 2024-07-06 20:36:20 发布

阅读量3.2w

点赞数 5

文章标签：团队

本文链接：https://blog.csdn.net/larger5/article/details/79805617

版权

一、前言

现在在团队做的项目都是前后端分离的，借助 swagger 进行前后端合作
① 后台负责写数据处理的接口
② 前台负责解析 JSON、设计界面

要实现接口可以给前端访问，还要设置允许跨域访问接口，正式本文的重点

前后端分离优缺点：
一、为什么要前后端分离：
1.后台接口可以 pc、app、pad 多端适应
2.前端 SPA 开发模式开始流行
3.前后端开发职责不清（如 JSP/thymeleaf/freemarker/Django 模板引擎渲染数据，到底是谁的工作？）
4.前后端互相等待，不能同时进行开发
5.前端一直配合着后端，能力受限
6.后台开发语言和模板高度耦合
二、前后端分离缺点
1.前后端学习门槛增加
2.数据依赖导致文档重要性增加
3.前端工作量加大
4.SEO 的难度加大（ajax大量使用）

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，
浏览器认为这种访问不安全

二、代码

package com.zcw.conf;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 实现基本的跨域请求
 * @author linhongcun
 *
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

三、其他

以上的代码基本是常识了，记录一下，
Ajax 请求示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        function upd() {
            $.ajax({
                type: "get",
                data: "a=1",
                url: "http://120.79.197.131:8080/user/getAllUser",
                success: function(result) {
                    console.log(result);
                }
            });
        }
    </script>
    <body>
        <!--获取-->
        <button id="btn2" onclick="upd()">Get request 获取</button>
    </body>

</html>

参考文章
SpringBoot下如何配置实现跨域请求？

IT小村

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
7
评论
在 SpringBoot 中设置允许跨域请求

一、前言现在在团队做的项目（网站）都是前后端分离的 ① 后台负责写接口、传递JSON，如下面一个 POST 请求（后台设置允许跨域请求后，DELETE、GET、PUT 也是可以的）这是我最近写的众酬网项目，新增众酬项目，的接口 ② 前台负责解析JSON、设计界面要实现接口可以给前端访问，还要设置允许跨域访问接口参考文章 SpringBoot下如何配置实现跨域请求...
复制链接

扫一扫