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

Question

当我使用函数向数据库添加数据时，在服务器端添加了 Access-Control-Allow-Origin 以避免CORS阻止，但是浏览器控制台仍然出现错误。请注意保留HTML标签。

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？

- OceanL

---

我认为你不能这样做。你必须配置你的服务器，添加CORS头Access-Control-Allow-Origin: <host>:<port>。 - Dariusz Bacinski

我已将其添加到服务器上，但是由于CORS的限制，数据库中只有2个函数被阻止，即插入数据的函数。 - OceanL

请参见 https://dev59.com/4lIH5IYBdhLWcg3wTL95#65858677。 - Suragch

Answer 1

如果你正在使用Node.js服务器，需要在服务器端代码中启用CORS支持。

1. 运行npm i cors express
2. 在index.js或server.js文件中 -

const express = require("express");

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

这应该可以解决Flutter Web的CORS问题

- Captain_Satya

---

太棒了，它对我有效。 - Mofidul Islam

Answer 2

为了启用服务器上的 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>    

- Vicky Salunkhe

---

请帮我解答：在哪里添加 .htaccess 文件，是靠近 pubspec.yml 吗？还是在哪里？ - Mohsin Khan

.htaccess 文件将存储在您的服务器索引目录中，而不是您的移动应用程序目录中。 - Vicky Salunkhe

你能更清楚地指出.htaccess文件在哪里吗？ - eqrakhattak

@icyNerd 在你发布构建的网络文件的服务器上创建一个 .htaccess 文件。（与 main.dart.js 等文件放在一起） - Hossein Yousefpour

Answer 3

Vicky Salunkhe在他的答案中很好地描述了使用.htaccess的一种选项。我发现如果你尝试从自己运行php脚本的服务器上读取此处，还有另一种选择。如果您想从MySQL数据库读取一些数据，并以正确的CORS设置将其作为json返回，则可以尝试以下操作：

<?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);

- Stephan

Answer 4

在Chrome上禁用CORS策略只是一个临时解决方案。令人沮丧的是，每次启动Chrome之前都必须手动调用它。

在Chrome中禁用同源策略

- Binh Phan

---

还有其他的解决方案吗？还是仍然面临着相同的问题？？？ - Atul Chaudhary

Answer 5

如果你遇到了类似的问题，而服务器已经添加了Access-Control-Allow-Origin但仍然被CORS阻止，请尝试检查函数（如果你使用函数来进行与postrgresql的CRUD操作），因为当我修复函数时，我的问题得到了解决。

- OceanL