Web配置之跨域访问

矫情吗；* 2023-10-07 23:28 41阅读 0赞

#### **【背景】** ####

创建了一个获取用户信息接口，如下：

package com.example.webproject.controller;
    
    import com.example.webproject.model.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
        @ResponseBody
        @RequestMapping("/getUser")
        public User getUser() {
            User u = new User();
            u.setName("zhangsan");
            u.setAge(20);
            u.setPassword("123456");
            return u;
        }
    }

打开浏览器访问 /user/getUser 接口，能够正常返回数据，结果如下：

![88b204fdb2ce4ef4b7a6e77af59441cb.png][]

#### 【问题】 ####

在Chrome浏览器中打开首页，在Console中执行JavaScript访问`localhost`：

> $.getJSON( "http://localhost:8080/user/getUser", (data) => console.log(JSON.stringify(data)));

执行结果如下图所示，无法返回user数据，存在跨域问题。

![955bc18906d848cfb51844849b74de60.png][]

#### 【解决方法】 ####

package com.example.webproject.comm.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * 系统配置
     */
    @Configuration
    public class MyMvcConfig implements WebMvcConfigurer {
        
        /**
         * 1、Web配置 之 跨域访问
         */
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            WebMvcConfigurer.super.addCorsMappings(registry);
            registry.addMapping("/user/**") //允许跨域访问的路径
                    .allowedHeaders("*") //允许头部设置
                    .allowedMethods("POST","GET", "DELETE", "PUT") //允许请求方法
                    .allowedOrigins("*"); //允许跨域访问的源
        }
    
    }

再次进行测试，浏览器能正常返回user数据，跨域问题解决。

![e2bceb008ee34e86ae70b7097275e1d6.png][]

[88b204fdb2ce4ef4b7a6e77af59441cb.png]: https://img-blog.csdnimg.cn/88b204fdb2ce4ef4b7a6e77af59441cb.png
[955bc18906d848cfb51844849b74de60.png]: https://img-blog.csdnimg.cn/955bc18906d848cfb51844849b74de60.png
[e2bceb008ee34e86ae70b7097275e1d6.png]: https://img-blog.csdnimg.cn/e2bceb008ee34e86ae70b7097275e1d6.png