Question

我有一个在localhost：3000上运行的反应应用程序，我尝试使用在本地主机：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。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃t; ttp：// localhost：3000＆＃39;因此不允许访问。响应的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;
}

使用React app调用REST API时出错

1 个答案: