CORS 请求未成功 - 做出反应答案

【问题标题】：CORS request did not succeed - reactCORS 请求未成功 - 做出反应
【发布时间】：2019-03-01 12:26:02
【问题描述】：

我在 ReactJS 中使用 axios 提出这个 API 请求

 axios.post(`${API_URL}/valida_proximo`, {
  id: images.map(image => image.id)
  },
  getAxiosConfig())
// this.setState({ images, loadingAtribuiImagens: false})
}

它在 Google Chrome 中运行良好，但在 Firefox 上我收到一个错误：

跨域请求被阻止：同源策略不允许读取位于http://localhost:5000/valida_proximo 的远程资源。（原因：CORS 请求没有成功）。[了解更多]

我能做什么？

这是我的 API

  @blueprint.route('', methods=['POST', ])
  @jwt_required()
  def index():
    if request.json:
    id_usuarioImagem = request.json.get('id')
    imagens_selecionadas = 


UsuarioImagem.query.filter(UsuarioImagem.id.in_(id_usuarioImagem)).all()

    if imagens_selecionadas:
        for imagem_selecionada in imagens_selecionadas:
            imagem_selecionada.batido=True
        db.session.commit()
        return 'ok', 200
return 'error', 400

【问题讨论】：

axios.post 支持 CORS 吗？ github.com/axios/axios/issues/1358 使用 fetch()，我知道我需要将 'credentials': 'same-origin' 添加到 args 以使 CORS 工作。但是，我找不到 axios 的等效选项。 CORS 还有很多其他问题可能会出错，但是，这就是我要开始的地方。
如果您的应用在安全上下文 (https) 上运行，这可能与以下 Firefox 错误有关：bugzilla.mozilla.org/show_bug.cgi?id=1376310

标签： reactjs flask

【解决方案1】：

CORS 错误通常与跨域请求以及未配置为接受请求接收方的请求相关联。 chrome 正在运行但 firefox 的事实似乎并不奇怪。

这是我使用的一种方法：

打开 Firefox 浏览器并加载页面。
执行引发跨域请求安全 (CORS) 错误的操作。
打开 firebug 并复制引发跨域请求安全 (CORS) 错误的 URL。
在同一 Firefox 浏览器的另一个选项卡中加载相同的 URL。
在另一个选项卡中打开 URL 后，系统会要求您添加证书。

添加证书后将解决跨域请求安全 (CORS) 错误，现在您将不会收到此错误。

【讨论】：

【解决方案2】：

我对 Axios 不太熟悉，但看起来您正在从 React 向 Flask 后端发出发布请求。如果前端和后端位于不同的端口上（例如您的 Flask 似乎位于 PORT 5000 上），那么您正在发出 CORS 请求。

使用 CORS，根据您发布的内容，您可能需要在 Flask 响应对象中包含一些访问控制标头。您可以手动执行此操作，也可以仅安装 pip 并使用“flask-cors”包。将包导入您的应用工厂并像这样使用它（有关更多信息，请参阅他们的文档）：

from flask_cors import CORS

def create_app(test_config=None):
    app = Flask(__name__, instance_relative_config=True)
    CORS(app)

该请求也可能通过“OPTIONS”请求“预检”，这也取决于您的 POST 的性质。更多信息会有所帮助

【讨论】：

我已经安装了烧瓶 CORS。发出请求时，它会发送 OPTIONS 请求 (127.0.0.1 - - [26/Sep/2018 12:22:32] "OPTIONS /valida_proximo HTTP/1.1" 200 -) 但仅此而已。例如，在 chrome 上，它发送 OPTIONS 请求，然后发送 POST 请求。
如果它发送一个 OPTIONS 请求，那么你需要确保你的烧瓶服务器上的路由接受 OPTIONS 方法，而不仅仅是你写的 POST 方法。您在使用 cookie 吗？请提供有关您的设置的更多信息
另外，从您的 Chrome 错误来看，当您似乎正在尝试使用 CORS 时，您的 Axios 似乎设置为“同源”。不熟悉 axios 但您可能应该配置它

【解决方案3】：

这是 Firefox 中的一个错误。如果您点击错误消息中的链接 (MDN)。你会发现：

出了什么问题？

使用 CORS 的 HTTP 请求失败，因为 HTTP 连接在网络或协议级别失败。该错误与 CORS 没有直接关系，而是某种基本的网络错误。

我认为这是连接失败，而不是 CORS 设置的问题。在 Firefox 修复它之前，您只需忽略错误消息即可。

该错误与刷新页面和长轮询请求或服务人员和轮询请求有关。

【讨论】：

这并不是说它是 Firefox 错误；而是MDN 是各种 Web 主题的参考指南。在这种情况下，它说问题出在后端服务器上。我遇到了这样的错误，尝试直接访问 API（在前端代码之外），发现它根本没有连接。问题是 Python 中的服务器文件配置错误（我已将其配置为 localhost，因此它停止在托管 Web 服务器上工作）。对于遇到这个不太有用的错误消息的其他人！