在 React Native (Expo) 和 Spring Boot 中处理 CORS 策略

问题描述 投票：0回答：1

我正在使用 React Native Expo 和 Spring Boot 制作一个混合应用程序（多平台应用程序）， 但是即使我在 Spring Boot 中设置了 

addCorsMappings
，React Native 中的应用程序（带有 Expo）也无法发送任何 HTTP 请求（获取）。

普通 HTML (JavaScript) 可以从服务器获取数据，但 React Native 中的应用程序在 iOS 和 Android 中都不能。

enter image description here

enter image description here

我现在应该做什么？

Spring boot中的设置：

package com.example.apiTest.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

public class webConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","PATCH","OPTIONS")
                .allowCredentials(true);
        

    }


}

GetTest.html（此代码在服务器运行时有效）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTTP GET Example</title>
</head>
<body>
  <button type="button" onclick="sendRequest()">Send Request</button>

  <script>
    function sendRequest() {
      fetch('http://localhost:8090/member/test')
        .then(response => response.json())
        .then(data => {
          console.log('Success:', data);
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }
  </script>
</body>
</html>

反应本机应用程序：

const testFunc = async () => {
  fetch('http://localhost:8090/member/test')
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
};

const LogInPage = () => {
  const [id, onChangeid] = React.useState();
  const [passWord, onChangeText2] = React.useState();
  const[disabled, setDisabled]=React.useState(false);

  return (
    <SafeAreaView>        
  
      <TouchableOpacity
        onPress={testFunc} 
        disabled={disabled}
        style={styles.button}
          
        
        >
          <Text style={{color : 'white'}}>로그인</Text>
    </TouchableOpacity>
    </SafeAreaView>
    
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 15,
    borderWidth: 1,
    padding: 10,

    top : 10,
    
  },

  container:{
    flex:1,
    justifyContent : 'center',
    paddingHorizontail : 10,
    
  },

  button:{
    alignItems : 'center',
    backgroundColor : 'gray',
    padding : 10,
    
  },

  text:{
    color : 'white',
    fontWeight : 'bold',
  },

});

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    LogInPage()

  );
};

我尝试了@CrossOrigin Annotation，但是不起作用， 但React Native应用程序可以发送请求到在线免费API测试。

为什么 React Native 在这种情况下不起作用？

我想要React Native App向服务器发送请求....

spring-boot react-native expo cors
1个回答
0
投票
@Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        return http
                .sessionManagement(session -> {
                    session.sessionCreationPolicy(SessionCreationPolicy.STATELESS);
                })
                .authorizeHttpRequests(request -> {
                    request.requestMatchers("/api/v1/auth/**").permitAll();
                    request.requestMatchers("/api/v1/token/**").permitAll();
                    request.requestMatchers("/api/v1/**").authenticated();
                })
                .addFilterBefore(filter, BasicAuthenticationFilter.class)
                .csrf(AbstractHttpConfigurer::disable)
                .cors(cors -> cors.configurationSource(
                        request -> {
                            CorsConfiguration config = new CorsConfiguration();
                            config.addAllowedOriginPattern("*"); <-------
                            config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
                            config.setAllowCredentials(true);
                            config.addAllowedHeader("*");
                            config.setExposedHeaders(List.of("Authorization", "Cache-Control", "Content-Type"));
                            return config;
                        }
                ))
                .build();
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.