CORS блокирует мой сервер, как это исправить? Использование Springboot Java в качестве бэкэнда и реагирование JS в качестве моего интерфейса

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, установленным в «username», и с паролем, установленным в «password»

Мой бэкэнд - это весенняя загрузка и использует конечную ссылку / логин с «username» и«Пароль» должен дать ответ. Так что этот код работает, за исключением того, что CORS блокирует соединение, так что он застрял на обработке навсегдаРешение, которое я нашел, было отключить всю безопасность в Chrome, и это работает. Но я ищу постоянное решение без необходимости отключения безопасности в настройках Chrome. Не уверен, что я делаю это через springboot или реагирую

Answer 1

Попробуйте использовать аннотацию '@CrossOrigin' на конечной точке REST пружины над аннотацией @RequestMapping.

Например: -

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

Answer 2

Создайте этот 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;
}

Answer 3

Когда дело доходит до запроса POST, вам могут потребоваться дополнительные настройки, такие как:

axio({
  method: 'put',
  headers: {
    'Content-Type': 'application/json',
  },
  data: JSON.stringify({
    "username": "username",
    "password": "password"
  }),
});