Web配置 之 跨域访问

【背景】

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

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 接口，能够正常返回数据，结果如下：

 

【问题】

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

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

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

 

 【解决方法】

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数据，跨域问题解决。