blocked by CORS policy on the browser working on postman

Question

I'm trying to fetch data from an API using reactJS, I used postman to test the API and it returns a JSON, but when I try from my reactJS application the web browser returns this error.

"Access to fetch at 'http://XX.XX.XX.XX*/v1/shipping' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Does anyone know why it's not working in the browser, but it works on postman?

web browser error

postman response

Here is the fetch function.

   fetchingData = () => {
    const bodyReq = {
      "bu":"",
      "customer":"",
      "start_time":"",
      "end_time":"",
      "serial_number":"XXXXXXXXXXXXX,XXXXXXXXXXXXX"
      }
    fetch("http://XX.XX.XX.XX/v1/shipping", {
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify({bodyReq}),
    })
      .then(response => {response.json()
      console.log(response, 'Response')})
      .then(
        (response) => {
          this.setState({
            isLoaded: true,
            items: response.items
          });
          console.log(response, 'Response')
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
          console.log(error, 'RESerror')
        }
      )
  }

This is the response I'm expecting from the API

{
    "code": 201,
    "error_code": 0,
    "msg": [
        {
            "bu": "XXXX",
            "carton_no": "XXXXXX",
            "container_no": "XXXXXX",
            "container_type": null,
            "cust_no": "XXXXXX",
            "emp_no": "XXXXXX",
            "group_name": "XXXXXX",
            "in_station_time": "XXXX-XX-XX XX:XX:XX",
            "line_name": "XXXXXX",
            "mo_number": "XXXXXX",
            "model_name": "XXXXXX",
            "pallet_no": "XXXXXX",
            "plate_no": null,
            "po_number": "XXXXXX",
            "qa_no": "N/A",
            "serial_number": "XXXXXX",
            "ship_address": "XXXXXX",
            "ship_mothod": "XXXXXX",
            "version_code": "XXXXXX"
        },
        {
            "bu": "XXXX",
            "carton_no": "XXXXXX",
            "container_no": "XXXXXX",
            "container_type": null,
            "cust_no": "XXXXXX",
            "emp_no": "XXXXXX",
            "group_name": "XXXXXX",
            "in_station_time": "XXXX-XX-XX XX:XX:XX",
            "line_name": "XXXXXX",
            "mo_number": "XXXXXX",
            "model_name": "XXXXXX",
            "pallet_no": "XXXXXX",
            "plate_no": null,
            "po_number": "XXXXXX",
            "qa_no": "N/A",
            "serial_number": "XXXXXX",
            "ship_address": "XXXXXX",
            "ship_mothod": "XXXXXX",
            "version_code": "XXXXXX"
        }
    ],
    "request": "POST /v1/shipping"
}

*note: I had to censure some data because is confidential data from the enterprise.

Yes, CORS is a security feature employed by browsers, Postman (curl, whatever) doesn't care. While developing, you can just disable CORS check in your browser. — mbojko, Aug 09 '19 at 17:25
@epascarello I did search about the error, but I was trying to see if I could do something about it because is not my api and I can't change configurations in the server. — Valeria Pulido, Aug 09 '19 at 17:47
okay, that's a great idea, to disable CORS, how do you do that in chrome? — atom88, Sep 23 '20 at 22:28

score 2 · Accepted Answer · answered Aug 09 '19 at 17:27

2

The browser environment is different from Postman. A browser has security features that Postman doesn't have and CORS is one of those.

If you want to understand how CORS work, check this link: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) than its own origin.

answered Aug 09 '19 at 17:27

lbrandao

4,144
4
35
43

okay, that's a great idea, to disable CORS, how do you do that in chrome? This answer doesn't tell you how to solve it? – atom88 Sep 23 '20 at 22:28
You can't disable CORS in the browser. The OP seemed confused by the fact that it was working on Postman, so I pointed out that his setup was not necessarily correct just because it worked on Postman. I also provided information pointing to a possible issue with different origins. I would say those are good leads. – lbrandao Sep 25 '20 at 12:34

blocked by CORS policy on the browser working on postman

1 Answers1