SpringBoot2.0（一）：配置跨域请求

最新推荐文章于 2023-07-31 22:52:30 发布

小飞技术

最新推荐文章于 2023-07-31 22:52:30 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot 文章标签： SpringBoot2.0 跨域请求 SpringBoot跨域访问

本文链接：https://blog.youkuaiyun.com/xiaofeivip_top/article/details/88378398

SpringBoot 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中使用@Configuration注解配置跨域请求，通过自定义CORS配置，实现对/api/**路径的跨域访问。并提供了一个ApiController示例，展示如何返回包含名字和密码的数据。同时，通过在两个不同端口运行的项目进行测试，验证跨域配置的有效性。

利用@Configuration配置跨域请求

代码实现如下:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * CORS配置
 * @author xiaofei
 * @create 2019-07-26 下午 04:24
 */
@Configuration
public class CustomCorsConfig extends WebMvcConfigurationSupport {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**");
    }
}

写一个ApiControll:

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;

/**
 * api接口
 *
 * @author xiaofei
 */

@RestController
@RequestMapping("/api/")
public class ApiController {

    @RequestMapping("get")
    public HashMap<String, Object> get(@RequestParam String name) {
        HashMap<String, Object> map = new HashMap();
        map.put("name", name);
        map.put("pwd", 123456);
        return map;
    }
}

在application.properties中配置:

server.port=8080

然后访问:http://localhost:8080/api/get?name=xiaofei 测试

{"name":"xiaofei","pwd":123456}

在创建另一个项目测试
application.properties中配置:

server.port=8081

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试CORS</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<button id="btu" >按钮</button>
    <script>
        $("#btu").click(function () {
           $.post(
               // 请求路径
               "http://localhost:8080/api/get?name=xiaofei",
               function (map) {
                   console.log(map);
               }

           );
        });
    </script>
</body>
</html>