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”注释上方。例如：-&nbsp;&nbsp;&nbsp;&nbsp;@CrossOrigin &nbsp;&nbsp;&nbsp;&nbsp;@RequestMapping(value="/login",method=RequestMethod.POST)

Answer 2

当请求 POST 时，您可能需要额外的配置，如下所示；axio({&nbsp; method: 'put',&nbsp; headers: {&nbsp; &nbsp; 'Content-Type': 'application/json',&nbsp; },&nbsp; data: JSON.stringify({&nbsp; &nbsp; "username": "username",&nbsp; &nbsp; "password": "password"&nbsp; }),});

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@EnableWebMvcpublic class CorsWebConfig implements WebMvcConfigurer {&nbsp; &nbsp; @Override&nbsp; &nbsp; public void addCorsMappings(CorsRegistry registry) {&nbsp; &nbsp; &nbsp; &nbsp; registry.addMapping("/**");&nbsp; &nbsp; &nbsp; &nbsp; registry.addMapping("/*.html");&nbsp; &nbsp; }&nbsp; &nbsp; @Override&nbsp; &nbsp; public void addViewControllers(ViewControllerRegistry registry) {&nbsp; &nbsp; &nbsp; &nbsp; registry.addRedirectViewController("/api/v2/api-docs", "/v2/api-docs");&nbsp; &nbsp; &nbsp; &nbsp; registry.addRedirectViewController("/api/swagger-resources/configuration/ui",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "/swagger-resources/configuration/ui");&nbsp; &nbsp; &nbsp; &nbsp; registry.addRedirectViewController("/api/swagger-resources/configuration/security",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "/swagger-resources/configuration/security");&nbsp; &nbsp; &nbsp; &nbsp; registry.addRedirectViewController("/api/swagger-resources", "/swagger-resources");&nbsp; &nbsp; }&nbsp; &nbsp; @Override&nbsp; &nbsp; public void addResourceHandlers(ResourceHandlerRegistry registry) {&nbsp; &nbsp; &nbsp; &nbsp; registry.addResourceHandler("/swagger-ui.html**")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .addResourceLocations("classpath:/META-INF/resources/swagger-ui.html");&nbsp; &nbsp; &nbsp; &nbsp; registry.addResourceHandler("/api/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");&nbsp; &nbsp; }}

Answer 4

在u配置中创建这个bean&nbsp;@Beanpublic CorsConfigurationSource corsConfigurationSource() {&nbsp; &nbsp; final CorsConfiguration configuration = new CorsConfiguration();&nbsp; &nbsp; configuration.setAllowedOrigins(ImmutableList.of(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "http://example.net",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "http://example.com",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;));&nbsp; &nbsp; configuration.setAllowedMethods(ImmutableList.of("HEAD", "OPTIONS", "GET", "POST", "PUT", "DELETE", "PATCH"));&nbsp; &nbsp; configuration.setAllowCredentials(true);&nbsp; &nbsp; configuration.setAllowedHeaders(ImmutableList.of("*"));&nbsp; &nbsp; configuration.setExposedHeaders(ImmutableList.of("Content-Disposition"));&nbsp; &nbsp; configuration.setMaxAge(3600L);&nbsp; &nbsp; final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();&nbsp; &nbsp; source.registerCorsConfiguration("/**", configuration);&nbsp; &nbsp; return source;}