首页 文章

使用React app调用REST API时出错

提问于
浏览 次
0

我有一个在localhost：3000上运行的反应应用程序，我尝试使用在本地主机：8080上运行的java ee后端休息服务器来调用REST API . 我在 Headers 上启用了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):

选项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 rest api reactjs cors

1 回答

  • 0

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

    @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;
}
    回复于

相关问题