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

【问题标题】：Error while consuming calling REST API with React app使用 React 应用程序调用 REST API 时出错
【发布时间】：2018-02-05 23:41:50
【问题描述】：

我有一个在 localhost:3000 上运行的反应应用程序，我尝试通过运行在 localhost:8080 上的 java ee 后端休息服务器调用 REST API。我在标题上启用了 CORS。

我试图在我的组件上进行表单提交发布请求。

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):

OPTIONS http://localhost:8080/test/api/rest/Service/checkCode 500 (Erreur Interne de Servlet)

还有 CORS 错误：

Fetch API 无法加载 http://localhost:8080/test/api/rest/Service/checkCode。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'ttp://localhost:3000'。响应的 HTTP 状态代码为 500。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

在 Java 端启用 cors
它不完全是一个解决方案，但要测试问题是否在 CORS 上，您可以设置 fetch 选项 mode: 'no-cors' 并禁用 CORS。
从您的请求代码中删除所有 myHeaders.append('Access-Control-Allow…') 内容。这些都是服务器发回的 response 标头。将它们添加到客户端代码中的请求只会破坏事情。
响应的 HTTP 状态代码为 500 表示当 Java 服务器接收到 OPTIONS 请求时发生了一些服务器端故障。您可能想查看服务器端的服务器日志，以查看发生 500 内部服务器故障时那里记录了哪些消息。
感谢您的帮助！我删除了所有 myHeader.append('Access-Control-Allow...') 并设置了'no-cors'模式，现在我只有 POST localhost:8080/test/api/rest/Service/checkCode 500 (Erreur Interne de Servlet）和console.log上的“网络响应不正常”。是的，我会尝试查看服务器日志

标签： java reactjs api rest

【解决方案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;
}

【讨论】：