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

Question

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

错误：-

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;
            }));
    }

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

Answer 1

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

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

如果仍然有问题，那么您可以分享您用来登录新用户的 url 和 headers 吗？。此外，尝试使用全局 cors 配置而不是控制器级别的配置，并提供细粒度的属性，例如您要公开的方法。在配置 class 中提供以下内容：

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

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

How to handle CORS error in Spring Boot, AngularJS application?

cors

angularjs

spring-boot