0

When I make a request from Postman, I get an error, but when I make a Post request from a React page, I get an error. I am not using Spring Security.

Access to XMLHttpRequest at 'http://localhost:8080/api/createData' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

React axios code:

return axios.post("http://localhost:8080/api/createData", {
            name: 'Michael'
          });

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>test1</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>test1</name>
    <description>Test1 project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web-services</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

Cotroller class for Request:

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class Tutorial {

  @PostMapping("/createData")
  public void createData(@RequestBody Data data) {
      System.out.println(data.getName());
  }
}

I did some research but couldn't figure it out. I get an error when requesting from postman. Why does the problem occur and how can I fix it?

zoroglur
  • 395
  • 2
  • 18
  • Please try to open your react page in chrome tab after disabling Same origin policy. – Avilash Nov 16 '22 at 17:41
  • @Avilash How Can I do that? – zoroglur Nov 16 '22 at 17:43
  • You can try with : https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome or https://stackoverflow.com/questions/24290149/creating-google-chrome-shortcut-with-disable-web-security – Avilash Nov 16 '22 at 17:44
  • for Linux When I try ****google-chrome --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"*** , it works in the opened browser, but when I close the browser and open it, it does not work and it does not work in firefox. Can you explain what is the cause of this problem? – zoroglur Nov 16 '22 at 17:49
  • What error coming with postman? – Rohit Agarwal Nov 16 '22 at 17:52
  • @RohitAgarwal No problem with Postman. – zoroglur Nov 16 '22 at 17:54
  • Thanks for feedback, When I added the @CrossOrigin notation to the method in my RestController class, the problem was fixed. But I did not fully understand the problem. I guess I need to review a few documents. – zoroglur Nov 16 '22 at 18:00
  • 1
    Hi Resul, I have added info link in my answer too. You can have a look. – Avilash Nov 16 '22 at 18:09

2 Answers2

0

You are getting the cors error due to different ports. It will not give CORS error if the protocol, host and port is the same. You can try to disable Same origin policy in chrome and try to open it. You can find more info here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Avilash
  • 176
  • 1
  • 9
0

When I added the @CrossOrigin notation to the method in my RestController class, the problem was fixed.

@CrossOrigin
@PostMapping("/createData")
  public void createData(@RequestBody Data data) {
      System.out.println(data.getName());
  }
zoroglur
  • 395
  • 2
  • 18