React JS和Spring boot CORS政策

大家好,我尝试做我的第一个应用程序完整的堆栈与弹簧引导和React js,但我解决一些问题CORS错误时,连接本地React前端到本地Spring Boot中间件的应用程序。

所以注解是.classe WebSecurityConfig。

 @Controller
@RequestMapping("/regions")
@RestController
@CrossOrigin()

classe WebSecurityConfig是 :

> package sales.reporting.atos.BackEndPFE.config;
>        import java.util.Arrays;
> 
> import org.springframework.context.annotation.Bean; import
> org.springframework.security.config.annotation.web.builders.HttpSecurity;
> import
> org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
> import
> org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
> import org.springframework.web.cors.CorsConfiguration; import
> org.springframework.web.cors.CorsConfigurationSource; import
> org.springframework.web.cors.UrlBasedCorsConfigurationSource;
> 
> @EnableWebSecurity
>     public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
>     @Override
>     protected void configure(HttpSecurity http) throws Exception {
>         http.cors().and();
>             //other configurations that you want
>     }
>     
>     @Bean
>     CorsConfigurationSource corsConfigurationSource()
>     {
>         CorsConfiguration configuration = new CorsConfiguration();
>         configuration.setAllowedOrigins(Arrays.asList("*"));
>         //or any domain that you want to restrict to 
>         configuration.setAllowedMethods(Arrays.asList("GET","POST"));
>         //Add the method support as you like
>         UrlBasedCorsConfigurationSource source = new     UrlBasedCorsConfigurationSource();
>         source.registerCorsConfiguration("/**", configuration);
>         return source;
>     } }

我的 axios :

       import axios from 'axios'; export const Majregions = (Majregion , history) => async dispatch => {

await axios.post("http://localhost:8080/regions/add" , Majregion);
history.push("/regions/add")

}

问题是:

   xhr.js:178 POST http://localhost:8080/regions/add net::ERR_CONNECTION_REFUSED
    dispatchXhrRequest @ xhr.js:178
    xhrAdapter @ xhr.js:12
    dispatchRequest @ dispatchRequest.js:52
    Promise.then (async)
    request @ Axios.js:61
    Axios.<computed> @ Axios.js:86
    wrap @ bind.js:9
    (anonymous) @ AtosAction.js:4
    (anonymous) @ index.js:8
    (anonymous) @ redux.js:477
    onSubmit @ Majregion.js:40
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
    executeDispatch @ react-dom.development.js:389
    executeDispatchesInOrder @ react-dom.development.js:414
    executeDispatchesAndRelease @ react-dom.development.js:3278
    executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
    forEachAccumulated @ react-dom.development.js:3259
    runEventsInBatch @ react-dom.development.js:3304
    runExtractedPluginEventsInBatch @ react-dom.development.js:3514
    handleTopLevel @ react-dom.development.js:3558
    batchedEventUpdates$1 @ react-dom.development.js:21902
    batchedEventUpdates @ react-dom.development.js:1060
    dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
    attemptToDispatchEvent @ react-dom.development.js:4267
    dispatchEvent @ react-dom.development.js:4189
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11061
    discreteUpdates$1 @ react-dom.development.js:21918
    discreteUpdates @ react-dom.development.js:1071
    dispatchDiscreteEvent @ react-dom.development.js:4168
    createError.js:16 Uncaught (in promise) Error: Network Error
        at createError (createError.js:16)
        at XMLHttpRequest.handleError (xhr.js:83)

我应该做什么,我需要解决这个错误,我需要保存数据的形式,但我已经得到这个错误。

解决方案:

把以下代码放在你的类中,其中main方法是存在的,并删除你的WebSecurityConfig类。

 @Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "PATCH")
                    .allowCredentials(true);
        }
    };
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

为什么API的1个值不保存?

2022-9-8 22:44:22

未分类

:ERR_EMPTY_RESPONSE超时两分钟后 -axios-post - nodejs

2022-9-8 22:44:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索