如何处理 Spring Boot、AngularJS 应用程序中的 CORS 错误？

Posted 2023-03-04

技术标签:

【中文标题】如何处理 Spring Boot、AngularJS 应用程序中的 CORS 错误？【英文标题】：How to handle CORS error in Spring Boot, AngularJS application? 【发布时间】：2020-11-29 17:20:14 【问题描述】：

我正在使用 AngularJS 前端和 Spring Boot 后端实现一个简单的身份验证程序。我在发送登录请求时遇到问题。当发送相关请求时，控制台中会打印以下错误

错误：-

Access to XMLHttpRequest at 'http://localhost:8080/rest/users/user' from origin 'http://localhost:4200' 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.
POST http://localhost:8080/rest/users/user net::ERR_FAILED

发送注册功能请求时出现同样的错误。然后我找到了将@CrossOrigin(origins = "http://localhost:4200")添加到控制器的解决方案。它修复了注册过程中发生的错误。现在的问题是，即使我在同一个控制器中编写了登录方法，它在尝试登录时也会出现错误，并且如果我尝试注册新用户也不会出现任何错误。

下面是后端的实现

存储库：-


import com.app.cashier.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.web.bind.annotation.CrossOrigin;

import java.util.List;
public interface UsersRepository extends JpaRepository<User, Integer> 

    List<User> findByUserName(String userName);

资源：-

package com.app.cashier.resource;

import com.app.cashier.model.User;
import com.app.cashier.repository.UsersRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin(origins = "http://localhost:4200") //<------------ I addded @CrossOrigin
@RestController 
@RequestMapping(value = "/rest/users")
public class UserResource 

    @Autowired
    UsersRepository usersRepository;

    @GetMapping(value = "/all")
    public List<User> getAll()
        return usersRepository.findAll();
    

    @GetMapping(value = "/user")                          //<----- Login function. This still gives the above error
    public List<User> getUser(@RequestBody final User user)
        return usersRepository.findByUserName(user.getUserName());
    

    @PostMapping(value = "/load")                          //<----- Registration function. This gives no error after adding @CrossOrigin
    public List<User> persist(@RequestBody final User user)
        usersRepository.save(user);
        return usersRepository.findAll();

AngularJS 前端请求

    login(userName) 
        console.log(userName)

        return this.http.post<any>(`http://localhost:8080/rest/users/user`,  userName )
            .pipe(map(user => 
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                console.log(user);
                return user;
            ));

我该如何克服这个问题。非常感谢！

【问题讨论】：

尝试将 nginx 放在两个应用程序的前面并反向代理它们，以使它们在一个公共 URL 下可用 【参考方案1】：

在控制器级别提供@CrossOrigin 注释应该为该controller.lar 请求下的所有方法启用跨源，因此这可能是因为您为该特定请求添加了一些额外的标头，因此请尝试：

@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
@RestController 
@RequestMapping(value = "/rest/users")
public class UserResource 
//Your code

如果仍有问题，您能否分享您用于登录新用户的 url 和标题？此外，尝试使用全局 cors 配置而不是一级控制器，并提供细粒度的属性，例如您想要公开的方法。在配置类中提供以下内容：

public WebMvcConfigurer corsConfigurer() 
    return new WebMvcConfigurer() 
        @Override
        public void addCorsMappings(CorsRegistry registry) 
            registry.addMapping("/greeting-javaconfig").allowedOrigins("http://localhost:4200");
        
    ;

类似：CORS policy conflict in Spring boot