Enable CORS while an XMLHttpRequest error occurs in flutter web

Question

when I will add data to the database using the function, and on the server I have added Access-Control-Allow-Origin so that it is not blocked by CORS, but still error when I looked in the browser console tools tab console

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.

how to deactivate CORS??

I think you can't. You have to configure your server to add CORS header Access-Control-Allow-Origin: : — Dariusz Bacinski, Sep 03 '19 at 19:34
I have added it on the server but only 2 functions to the database are blocked by cors namely the function to insert data — OceanL, Sep 04 '19 at 03:10
See also https://stackoverflow.com/questions/60191683/xmlhttprequest-error-in-flutter-web-enabling-cors-aws-api-gateway/65858677#65858677 — Suragch, Jan 23 '21 at 11:32

score 3 · Answer 1 · answered Oct 27 '19 at 17:54

3

For enabling cors on my server and to resolve XMLHttpRequest error in flutter web

I am using this in my .htaccess file for allowing access to certain domains only

 <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>

answered Oct 27 '19 at 17:54

Vicky Salunkhe

9,869
6
42
59

where to add .htaccess file like near to pubspec.yml ? or where Please help me – Mohsin Khan Mar 06 '20 at 16:55
`.htaccess` file will be stored on your server index directory not on your mobile app's directory – Vicky Salunkhe Mar 07 '20 at 05:43
1

can you be more clear as to where the `.htaccess` file is? – eqrakhattak May 29 '21 at 21:07
@icyNerd Create a .htaccress file on your server where you published the built web files. (Next to the main.dart.js, etc.) – Hossein Yousefpour Mar 07 '22 at 11:21

score 3 · Answer 2 · answered Apr 14 '21 at 09:28

3

For anyone who is using node.js server, enable cors support in your server side code.

npm i cors express
In index.js or server.js -

const express = require("express");

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

This should fix cors issue with flutter web

answered Apr 14 '21 at 09:28

Captain_Satya

61
6

great its working for me – Mofidul Islam Oct 21 '21 at 13:08

score 0 · Answer 3 · answered Sep 04 '19 at 09:43

if you have experienced something like that, and the server has added Access-Control-Allow-Origin but is still blocked by CORS, try checking the function (if you use the function to CRUD with postrgresql) because my problem is solved when I fix the function

score 0 · Answer 4 · answered May 01 '20 at 01:34

0

Disabling CORS policy on Chrome is a temporary solution. It's just frustrating that you have to manually call it before starting Chrome every. single. time. Disable same origin policy in Chrome

answered May 01 '20 at 01:34

Binh Phan

69
7

is there is any alternate solution for this, still facing the same issue ??? – Atul Chaudhary Apr 25 '21 at 12:36

score 0 · Answer 5 · answered Oct 07 '21 at 15:14

Vicky Salunkhe described in his answer one option with .htaccess very well. I found that and an alternative if you try to read from a server where you are running a php script yourself here. If you want to read some data from a MySQL database and return it as json with the right CORS setting, you could try this:

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

Enable CORS while an XMLHttpRequest error occurs in flutter web

5 Answers5

Linked

Related