移动 Angular Spring Boot 应用程序时出现 CORS 错误答案

【问题标题】：CORS Error when moving Angular Spring Boot Applcation移动 Angular Spring Boot 应用程序时出现 CORS 错误
【发布时间】：2021-03-02 15:56:32
【问题描述】：

所以我正在开发一个网络应用程序，但是当我将所有内容从本地主机移动到我托管的域时遇到了问题。目前，每当我尝试向后端发送任何发布请求时，都会收到以下错误：

Access to XMLHttpRequest at 'http://sweatguild.com:8080/api/auth' from origin 'http://sweatguild.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我环顾四周，发现运行以下命令允许发布请求：

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

但这显然不是最优的。

这里是一些相关代码

发帖请求的角度：

getUserDetails(charName: string, password: string){
    return this.http.post('http://sweatguild.com:8080/api/auth', {
      charName,
      password
    }).subscribe(data =>{
      if(data){
        this.loggedInStatus = true;
        localStorage.setItem('loggedIn', 'true');
        localStorage.setItem('charName', charName);
        this.router.navigate(['/']);
        this.getPerms(charName);
      }else{
        this.loggedInStatus = false;
        localStorage.removeItem('charName');
        localStorage.removeItem('loggedIn');
        localStorage.removeItem('admin');
        window.alert("Incorrect login information");
      }
    })
  }

在 Spring 应用程序中

@RestController
@CrossOrigin(origins = "http://sweatguild.com:80")
@RequestMapping("api/")
public class RosterController {
    @Autowired
    RosterRepository rosterRepository;

    @PostMapping("/auth")
    public boolean loginAuth(@RequestBody Roster roster){
        System.out.println(roster.getCharName());
        return rosterRepository.loginAuth(roster);
    }

当我在 localhost 上运行时，所有这些都再次正常工作。任何和所有的想法都将不胜感激。

【问题讨论】：

标签： angular spring-boot cors

【解决方案1】：

如果您在不同端口上运行的两个进程尝试在单个服务器上进行通信，则会引发 CORS。

当您尝试从本地 API 连接到远程 API 时，这两个进程在不同的机器上运行。

如果您的 Angular 和 Spring Boot 代码在同一个 jar/build 中，则不需要添加 @CrossOrigin 注释。如果它们在不同的端口上运行，请确保您在 CrossOrigin 注释中添加了正确的 Angular 应用程序进程端口。

如果您提到正确的端口号，请尝试添加允许的方法类型，例如：

@CrossOrigin(origins = "http://sweatguild.com:<ANGULAR_APP_PORT>", methods = {RequestMethod.POST})

或者简单地允许所有来源，例如：

@CrossOrigin(origins = "*")

【讨论】：