Question

我使用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

Answer 1

CORS错误通常与跨域请求以及某些未配置为在请求的接收方接受请求的错误相关。 chrome可以运行，但是Firefox似乎并不奇怪。

这是我使用的一种方法：

打开Firefox浏览器并加载页面。
执行引发跨源请求安全性（CORS）错误的操作。
打开firebug并复制引发跨源请求安全性（CORS）错误的URL。
在相同的Firefox浏览器的另一个标签中加载相同的URL。
在另一个标签中打开URL后，将要求您添加证书。

添加证书后，将解决跨源请求安全性（CORS）错误，现在您将不会遇到此错误。

Answer 2

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

使用CORS，根据您要发布的内容，您可能需要在Flask响应对象中包括一些Access-Control标头。您可以手动执行此操作，也可以只是点安装并使用'flask-cors'软件包执行此操作。将包导入到您的应用程序工厂中，然后像这样使用（请参阅其文档以获取更多信息）：

from flask_cors import CORS

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

取决于POST的性质，该请求可能还会带有“ OPTIONS”请求而被“预检”。更多信息会有所帮助

Answer 3

这是firefox中的错误。如果您在错误msg中点击链接（MDN）。您会发现：

出了什么问题？

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

我将其读取为连接失败，而CORS设置没有问题。您只需要忽略错误消息，直到firefox修复它即可。

该错误与刷新页面以及长时间的轮询请求或服务工作者和轮询请求有关。

CORS请求未成功-反应

3 个答案:

出了什么问题？