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

Posted 2023-03-04

【中文标题】使用 React 应用程序调用 REST API 时出错

【英文标题】：Error while consuming calling REST API with React app

【发布时间】：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上的“网络响应不正常”。是的，我会尝试查看服务器日志

【参考方案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;