Question

我正在尝试使用reactJS从API中获取数据，我使用邮递员测试该API，并且该API返回了JSON，但是当我从reactJS应用程序尝试时，Web浏览器会返回此错误。

“从来源'http://XX.XX.XX.XX'到'http://localhost:3000 * / v1 / shipping处获取信息的访问已被CORS政策阻止：对预检请求的响应未通过访问控制检查：请求的资源上没有“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。”

有人知道为什么它不能在浏览器中运行，但是可以在邮递员上工作吗？

web browser error

postman response

这是获取功能。

   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')
        }
      )
  }

这是我期望从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"
}

*注意：由于来自企业的机密数据，我不得不谴责某些数据。

Answer 1

浏览器环境与Postman不同。浏览器具有Postman所没有的安全功能，而CORS就是其中之一。

如果您想了解CORS的工作原理，请查看以下链接：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨源资源共享（CORS）是一种机制，该机制使用其他HTTP标头来告诉浏览器，使运行在一个来源（域）上的Web应用程序有权访问来自另一个来源的服务器中的选定资源。当Web应用程序请求其来源（域，协议或端口）与其来源不同的资源时，它将执行跨域HTTP请求。

在邮递员上运行的浏览器上被CORS策略阻止

1 个答案: