Error SEC7120: [CORS] The origin 'http://localhost:4200' did not find 'http://localhost:4200' in the Access-Control-Allow-Origin response

Question

Actually I am trying to connect an Angular app with my Maven-Jersey-webapp(implements Rest Services concept) and getting this error.

More Details: I am using Oracle10g XE Database Eclipse IDE for maven Project(http://localhost:8080/MavenProject) Angular CLI(http://localhost:4200/)

I want to retrieve data from database(Stored in students table) and then display that data in Angular App in a Table my jersey project returns the table data in JSON and XML format(Running Successfully)

retrieving student table data in JSON format using Maven-jersey-webapp implementing rest

angular code making get request using HttpClient

error which i get while making get request

Answer 1

You can fix this by checking if you are using

http vs https

Just use http to fix it. After that, Add that in the header in the angular service you created like doing a code like this

 const httpOptions = {
            headers: new HttpHeaders({
                'Access-Control-Allow-Origin': 'http://localhost:4200', // -->Add this line
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
                'Access-Control-Allow-Headers': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            })
        };

Just check the string value you passed in your code. Sometimes your eye gets trick on these values. Like

http://localhost:4200 vs https://localhost:4200

Answer 2

I had the exact same error.

The issue was in the .net core web api project. The method I made a post to, had a object defined in the parameter list, without an empty constructor.

The CORS error was really misleading.

Answer 3

Open the file App_Start/WebApiConfig.cs. Add config.EnableCors(); in WebApiConfig.Register method.

Answer 4

With the latest update progress prop of drawerContent seems to return undefined. So the animation is not working.

Instead of using useState , we can use useDrawerProgress() hook in the Main component instead of Drawer component. All the animation logic needs to be implemented in Main Component.

//Main Component

const MainLayout = (props) => {
  const progress = useDrawerProgress();

  const scale = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

  const borderRadius = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [0, 26],
  });

  const animatedStyle = {
    borderRadius,
    transform: [{ scale }],
  };
  return (
    <Animated.View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "white",
        ...animatedStyle,
      }}
    >
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

export default MainLayout;

PS: remove any animation logic and props passed in drawer component. We don't need them anymore.

Answer 5

useDrawerProgress - working try this code:

const drawerProgress = useDrawerProgress();
  const animatedStyle = useAnimatedStyle(() => {
    const scale = interpolate(drawerProgress.value, [0, 1], [1, 0.8], {
      extrapolateRight: Extrapolate.CLAMP,
    });
    const borderRadius = interpolate(drawerProgress.value, [0, 1], [0, 10], {
      extrapolateRight: Extrapolate.CLAMP,
    });
    return {
      transform: [{scale}],
      borderRadius,
    };
  });

But write this code inside screens not in the DrawerContent, for me its working!!