在 Flutter Web 中发生 XMLHttpRequest 错误时启用 CORS答案

【问题标题】：Enable CORS while an XMLHttpRequest error occurs in flutter web在 Flutter Web 中发生 XMLHttpRequest 错误时启用 CORS
【发布时间】：2020-01-05 23:16:23
【问题描述】：

当我将使用该函数将数据添加到数据库时，我在服务器上添加了Access-Control-Allow-Origin，以便它不会被 CORS 阻止，但是当我查看浏览器控制台工具选项卡控制台时仍然出错

Access to XMLHttpRequest at 'https://int.goo.id/api/pg/sso.register' from origin 'http://127.0.0.1:8080' 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.

如何停用 CORS？？

【问题讨论】：

我认为你不能。您必须配置服务器以添加 CORS 标头 Access-Control-Allow-Origin: :
我已经在服务器上添加了，但是数据库中只有2个函数被cors阻止了，即插入数据的函数
另见stackoverflow.com/questions/60191683/…

标签： dart xmlhttprequest flutter-web

【解决方案1】：

Vicky Salunkhe 在他的回答中很好地描述了 .htaccess 的一个选项。如果您尝试从您自己运行 php 脚本的服务器中读取 here，我发现了这一点和替代方法。如果您想从 MySQL 数据库中读取一些数据并将其返回为 json 并使用正确的 CORS 设置，您可以试试这个：

<?php

header("Access-Control-Allow-Headers: Authorization, Content-Type");
header("Access-Control-Allow-Origin: *");
header('content-type: application/json; charset=utf-8');


$host_name = '...';
$database = '...';
$user_name = '...';
$password = '...';

$link = new mysqli($host_name, $user_name, $password, $database);
if ($link->connect_error) {    
    die('<p>Failed to connect to MySQL: ' . $link->connect_error .
     '</p>');
}
$link->set_charset('utf8mb4');

$sql = "...";
$result = $link->query($sql);
$result = $link->query($sql);
$data = $link->query($sql)->fetch_all(MYSQLI_ASSOC);
echo json_encode($data);

【讨论】：

【解决方案2】：

对于使用 node.js 服务器的任何人，请在您的服务器端代码中启用 cors 支持。

npm i cors express
在 index.js 或 server.js 中 -

const express = require("express");

const app = express();
var cors = require("cors");
app.use(cors());

这应该可以解决 Flutter web 的 cors 问题

【讨论】：

非常适合我

【解决方案3】：

在 Chrome 上禁用 CORS 政策是一种临时解决方案。令人沮丧的是，您必须在每次启动 Chrome 之前手动调用它。单身的。时间。 Disable same origin policy in Chrome

【讨论】：

是否有任何替代解决方案，仍然面临同样的问题???

【解决方案4】：

用于在我的服务器上启用 cors 并解决 flutter web 中的 XMLHttpRequest 错误

我在我的.htaccess 文件中使用它来只允许访问某些域

 <ifModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(localhost:25120|domain.com|domain2.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
 </ifModule>

【讨论】：

在哪里添加 .htaccess 文件，例如 pubspec.yml 附近？或在哪里请帮助我
.htaccess 文件将存储在您的服务器索引目录中，而不是您的移动应用程序目录中
你能更清楚.htaccess文件在哪里吗？

【解决方案5】：

如果您遇到过类似的情况，并且服务器已添加 Access-Control-Allow-Origin 但仍被 CORS 阻止，请尝试检查该功能（如果您使用该功能对 postrgresql 进行 CRUD），因为当我修复功能

【讨论】：