尽管将CORS策略设置为

时间:2019-01-17 06:10:24

标签: javascript reactjs cors fetch

因此,我正在尝试使用componentWillMount进行获取请求,以在组件加载之前获取数据,但它始终会引发错误

Access to fetch at 'http://localhost:5000/mine/1/user_list' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

现在,我确实尝试了其他相关问题中提出的所有解决方案。我尝试过的一些事情是在标题中设置“ Allow-CORS”参数。我也有Google chrome工具可以打开CORS,并且它已经打开。除此之外,我还尝试过使用模式将参数保留在获取请求中。

但是它不起作用。有趣的是,如果我尝试使用恒定的URL(例如http://locahost:5000/maintenance/company/fetch),则请求可以顺利通过,而不会出现任何问题。但是,当我使用如下所示的自定义路径URL(http://localhost:5000 +“ mine /” + activeSite +“ / user_list”;)时,问题开始。我随附了代码的小片段,供您参考。

我的后端在Python3 flask-restplus中。它在后端没有收到请求。即使发出提取请求,也会引发错误。我的控制器对后端的CORS没有此类策略。但是我认为,如果其他请求在应用程序中运行正常,则在后端没有该策略的情况下也可以正常运行。我还用Swagger-UI测试了功能,效果很好。

import React, { Component } from "react";
import Select from "react-select";
import { serverConst } from "../constants/system";
import { getAuthHeader } from "../helper/authHeader";

class TaskForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      assigned: "",
      assigner: [],
      reporter_list: [],
      operationSucceed: false,
      error: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    let activeSite = localStorage.getItem("activeMinesite");
    if (activeSite) {
      const request_url = serverConst.SERVER_URL + "mine/" + activeSite + "/user_list";
      fetch(request_url, {
        method: "GET",
        mode: "cors",
        headers: getAuthHeader()
      }).then(response => {
        response.json().then(json => {
          console.log(response);
        });
      });
    }
  }

1 个答案:

答案 0 :(得分:-1)

您可以尝试使用以下cmd从命令行启动Chrome:

open -a Google\ Chrome --args --disable-web-security --user-data-dir