Spring Boot - 跨域请求被阻止（原因：CORS 标头“Access-Control-Allow-Origin”缺失）答案

【问题标题】：Spring Boot - Cross-Origin Request Blocked (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)Spring Boot - 跨域请求被阻止（原因：CORS 标头“Access-Control-Allow-Origin”缺失）
【发布时间】：2019-11-13 02:09:35
【问题描述】：

我有这个映射：

User 1----------------------------* Expertises

我用的是控制器SpringBoot，我的控制器是

@RestController
@CrossOrigin(origins = "http://localhost:4200", "http://localhost:6227")
@RequestMapping("/api/auth")
public class UserController
{

    @PostMapping("/signup/{expertises}")
    public ResponseEntity<String> registerUser(@Valid @RequestBody SignUpForm signUpRequest, @PathVariable List<String> expertises)
    {
    }
}

我将注解 @CrossOrigin 添加到所有存储库中

@CrossOrigin(origins = {"http://localhost:4200", "http://localhost:6227"}, methods = { RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE }, maxAge = 3600)
@Repository
public interface UserRepository extends JpaRepository<User, Long> {}

主要类是：

@SpringBootApplication
public class SpringBootJwtAuthenticationApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootJwtAuthenticationApplication.class, args);
    }


    @Bean
    public WebMvcConfigurer configurer()
    {
          return new WebMvcConfigurer()
          {
                @Override
                public void addCorsMappings(CorsRegistry registry)
                {
                  registry.addMapping("/*")
                      .allowedOrigins("http://localhost:4200", "http://localhost:6227");
                }
          };
    }

}

我添加了文件 MyConfiguration（正如 Ananthapadmanabhan 先生建议的那样）

前端（Angular6）

所以我想使用这种方法向一位用户添加专业知识列表：

 onSubmit()
        {
            this.submitted = true;
            console.log('---------SelectedExpertise:' + this.selectedExpertiseCheckBox);
            this.userService.signUpUser(this.user,
                                        this.selectedExpertiseCheckBox)
                            .subscribe(data => console.log("---------------Create user:" + data)
                            ,error => console.log(error));

            this.user = new User();
        }

在哪里

signUpUser(value: any, listExp: String[]): Observable<Object>
    {
        return this.http.post(`${this.baseUrl}/signup/${listExp}`, value);
    }

我不能这样做，因为要添加专业知识列表。这会产生这个错误

您对解决这个问题有什么想法吗？谢谢。

【问题讨论】：

你能提供你的spring boot版本吗？以及来自 chrome 的 OPTION 调用的屏幕截图。
您好 @YogeshPrajapati 先生，感谢您的回复，<modelVersion>4.0.0</modelVersion>

标签： spring-boot angular6

【解决方案1】：

即使您启用了 CORS。来自不同端口的请求不会通过。您需要启用 HTTP.OPTIONS。

【讨论】：

【解决方案2】：

您已在端口地址 4200 上为端点 http://localhost:4200 启用 CORS。但是您似乎在本地单独运行 angular 6 应用程序，并且请求是从端口地址 6227 发出的，这可能会导致问题，因为您启用的 CORS 策略仅允许相同的来源。尝试在 CORS 中添加以下内容：

@CrossOrigin(origins = "http://localhost:6227")

如果您仍然遇到问题，Cross-Origin Request Blocked (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) 请查看此帖子：

CORS policy conflict in Spring boot

【讨论】：

您好 @Ananthapadmanabhan 先生，我对所有文件进行了修改 @CrossOrigin(origins = {"http://localhost:4200", "http://localhost:6227"}。因此，CORS 为 2 个端点 http://localhost:4200 和 http://localhost:6227 启用，但仍然出现错误。
另外，我想告诉你，之前，一切都成功了。此异常出现在之后使用List<String> expertises。
@Jolia 为什么不使用请求参数或请求正文来映射专家而不是路径变量。如果您期望路径变量中有多个值，然后将其更改为使用请求参数，您可以将复杂对象映射为请求参数。
@Jolia 您能否附上您的 Angular ajax 调用的请求和响应标头以及响应，例如控制台的屏幕截图。另外，您是否检查了我在答案中提供的链接，这是一个类似的问题。
您好@Ananthapadmanabhan，我将@PathVariable List<String> expertises 更改为@RequestParam List<String> expertises，但仍然遇到同样的问题。一旦我删除它，一切正常。所以问题是List<String> expertises的添加。但我不知道原因。你有什么想法吗？谢谢

【解决方案3】：

如控制台所示；这是 CORS 的问题。但实际上并非如此。

事实上，这个错误是由于前端对 localStorage 的使用不当造成的：必须像这样调用字符串列表：

var storedExpertises = JSON.parse(localStorage.getItem("explib"));

而不是那样：

localStorage.getItem("explib")

非常感谢 @Ananthapadmanabhan 先生的帮助和建议。

【讨论】：