前后端跨域问题解决： No ‘Access-Control-Allow-Origin’ header is present on the requested resource

一、问题描述

前端ajax调用后端spring-boot的接口api的时候，报错跨域相关问题

Access to XMLHttpRequest at 'http://127.0.0.1:8009/queryAllUsers' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

二、问题原因

原因就是跨域访问的问题。跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同源是指，域名，协议，端口均相同，下面是相关实例：

http://www.ericsson.com/index.html 调用 http://www.ericsson.com/server.PHP （非跨域或者叫同源）

http://www.baidu.com/index.html 调用
http://www.ericsson.com/server.php （主域名不同:baidu/ericsson，跨域）

http://abc.baidu.com/index.html 调用
http://def.baidu.com/server.php （子域名不同:abc/def，跨域）

http://www.baidu.com:8080/index.html 调用 http://www.baidu.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.baidu.com/index.html 调用
https://www.baidu.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行

参考：什么是跨域问题

三、解决问题

1.方法一

在控制层加上@CrossOrigin这个注解就行了

@CrossOrigin
@RestController
public class UserController {

    @Autowired
    UserService userService;

    @RequestMapping("/queryUserById")
    public User queryUserList(){
        User user= userService.getById(1);
        System.out.println(user);
        return user;
    }


    @RequestMapping("/queryAllUsers")
    public List<User> queryAllUsers(){
        List<User> users= userService.getUsers();
//        System.out.println(user);
        return users;
    }
}

2.方法二：配置跨域信息

/**
 * 配置跨域信息
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有的当前站点的请求地址，都支持跨域访问。
                .allowedOrigins("*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置，因为在跨域请求的时候，外部域的解析可能是localhost、127.0.0.1、主机名
                .allowCredentials(true) // 是否支持跨域用户凭证
                .allowedMethods(ORIGINS) // 当前站点支持的跨域请求类型是什么
                .maxAge(3601); // 超时时长设置为1小时。 时间单位是秒。
    }
}```

四、验证

1.实例

添加注解@CrossOrigin

import com.test.bean.User;
import com.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@CrossOrigin
@RestController
public class UserController {

    @Autowired
    UserService userService;

    @RequestMapping("/queryUserById")
    public User queryUserList(){
        User user= userService.getById(1);
        System.out.println(user);
        return user;
    }


    @RequestMapping("/queryAllUsers")
    public List<User> queryAllUsers(){
        List<User> users= userService.getUsers();
//        System.out.println(user);
        return users;
    }
}

2.前端web结果：解决了跨域问题

五、参考

1.解决CORS : No ‘Access-Control-Allow-Origin’ header is present on the requested resource访问跨域问题