CORS 阻塞了我的后端服务器，如何修复？使用 Springboot java 作为后端

Question

import React, { Component } from "react";import axios from 'axios';class App extends Component {  handleSubmit(event) {    axios.post('http://localhost:3050/login', {      "username": "username",      "password": "password"    })      .then(function (response) {        console.log(response);      })      .catch(function (error) {        console.log(error);      });    event.preventDefault();  }  render() {      return(        <form onSubmit={this.handleSubmit}>          <input type="submit" value="Submit" />        </form>      );  }}export default App;只需检查后端，将用户名 json 设置为“username”并将密码设置为“password”我的后端是 spring boot，使用带有“用户名”和“密码”的结束链接 /login 应该会给出一些响应。因此，这段代码可以工作，除非 CORS 会阻止连接，因此它会永远停留在处理状态。我发现的一个解决方案是禁用 Chrome 中的所有安全性，并且它有效。但我正在寻找一个永久的解决方案，而不必禁用 chrome 设置的安全性。不确定我是通过 springboot 还是 React 来完成

Answer 1

尝试在 Spring REST 端点上使用注释“@CrossOrigin”，位于“@RequestMapping”注释上方。

例如：-

    @CrossOrigin
    @RequestMapping(value="/login",method=RequestMethod.POST)

Answer 2

当请求 POST 时，您可能需要额外的配置，如下所示；

axio({

  method: 'put',

  headers: {

    'Content-Type': 'application/json',

  },

  data: JSON.stringify({

    "username": "username",

    "password": "password"

  }),

});

Answer 3

请将以下文件添加到您的项目中存在 Main spring boot 类的包中。这对我来说适用于 Spring boot、React 生态系统中的所有 CORS 问题。

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

@EnableWebMvc

public class CorsWebConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**");

        registry.addMapping("/*.html");

    }

    @Override

    public void addViewControllers(ViewControllerRegistry registry) {

        registry.addRedirectViewController("/api/v2/api-docs", "/v2/api-docs");

        registry.addRedirectViewController("/api/swagger-resources/configuration/ui",

                "/swagger-resources/configuration/ui");

        registry.addRedirectViewController("/api/swagger-resources/configuration/security",

                "/swagger-resources/configuration/security");

        registry.addRedirectViewController("/api/swagger-resources", "/swagger-resources");

    }

    @Override

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/swagger-ui.html**")

                .addResourceLocations("classpath:/META-INF/resources/swagger-ui.html");

        registry.addResourceHandler("/api/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");

    }}

Answer 4

在u配置中创建这个bean

 @Bean

public CorsConfigurationSource corsConfigurationSource() {

    final CorsConfiguration configuration = new CorsConfiguration();

    configuration.setAllowedOrigins(ImmutableList.of(

            "http://example.net",

            "http://example.com",

           ));

    configuration.setAllowedMethods(ImmutableList.of("HEAD", "OPTIONS", "GET", "POST", "PUT", "DELETE", "PATCH"));

    configuration.setAllowCredentials(true);

    configuration.setAllowedHeaders(ImmutableList.of("*"));

    configuration.setExposedHeaders(ImmutableList.of("Content-Disposition"));

    configuration.setMaxAge(3600L);

    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

    source.registerCorsConfiguration("/**", configuration);

    return source;

}