使用React应用程序调用REST API时出错

Question

我有一个运行在localhost:3000上的react应用程序，我尝试使用Java ee后端REST服务器调用REST API，运行在localhost:8080上。我已经在头球上启用了CORS。

我试着在我的组件上做一个表单提交post请求。

fetchApi = () => {

    const url = 'http://localhost:8080/test/api/rest/Service/checkCode';

    var myHeaders = new Headers();

    myHeaders.append('Access-Control-Allow-Origin', '*');
    myHeaders.append('Access-Control-Allow-Headers', 'origin, content-type, accept, authorization');
    myHeaders.append('Access-Control-Allow-Credentials', 'true');
    myHeaders.append('Access-Control-Allow-Methods', ' GET, POST, PUT, DELETE, OPTIONS, HEAD');
    myHeaders.append('Content-Type', 'application/json');

    var myInit = {
        method: 'POST',
        headers: myHeaders,
        mode: 'cors',
        cache: 'default',
        body: JSON.stringify({
            code: '15465',
            name: 'Jack',
        })
    };

    fetch(url, myInit)

        .then(function(response) {

            if (response.ok) {
                return response.json();
            }
            else{
                throw new Error('Network response was not ok');
            }


        }).then(function(data){

        console.log(data);
        this.setState({items: data});

    }).catch(function(error){
        console.log('There has been a problem with your fetch operation: ' + error.message);
    })
};

行中有错误：

 fetch(url, myInit):

选项http://localhost:8080/test/api/rest/service/checkcode 500(Erreur Interne de Servlet）

和CORS错误：

提取API无法加载http://localhost:8080/test/API/rest/service/checkcode。对preflight请求的响应未通过访问控制检查：请求的资源上没有“access-control-allow-origin”标头。因此，不允许访问源“ttp://localhost:3000”。响应的HTTP状态代码为500。如果一个不透明的响应满足您的需要，请将请求的模式设置为“no-cors”以获取禁用CORS的资源。

Answer 1

这是一个后端问题，而不是一个前端，你应该允许CORS从后端，这取决于后端使用的技术，我在我的后端使用了spring boot，所以通过添加这段代码到安全配置将解决它

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}