• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Dart

      • Home
      • Blog
      • Dart
      • [SOLVED] Flutter Web CORS Error
      Flutter-Web-Cors-Error-Solved-Navoki.com

      [SOLVED] Flutter Web CORS Error

      • Posted by Shivam Srivastava
      • Categories Dart, Dart Server, Dart Web, Flutter, Flutter Web
      • Date May 4, 2022
      • Comments 0 comment
      Spread the love
      Contents hide
      1 Quick Solution for CORS Policy Error
      1.1 1. Solution for Windows
      1.2 2. Solution for macOS
      2 Adding CORS (Cross-Origin Resource Sharing) header
      3 1. CORS policy issue when fetching Rest API
      3.1 a. Accept request in CORS from Your Server (Recommended)
      3.2 b. Accept request in CORS from anywhere (Dev only)
      3.3 c. Using 3rd party CORS proxy (Not Recommended)
      4 2. CORS preflight issue in Network Image
      4.1 a. Using Alternative Flutter widgets to avoid CORS error
      4.2 b. Public Image from Own Server, using CORS header
      4.3 c. Public Image from Other Server, using CORS Proxy
      5 Important points to remember
      6 Stuck in Flutter ?
      6.1 Please login to bookmark

      You must have faced a CORS Policy error in Flutter web app (as mentioned below) when fetching data from a Rest API or using a NetworkImage URL.

      Access to XMLHttpRequest at 'https://navoki.com/wp-content/uploads/2019/09/200_40.png' from origin 'http://localhost:9090' 
      has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


      Quick Solution for CORS Policy Error

      These are temporary solutions, enable it after use for security reasons.

      1. Solution for Windows

      Run this command in you terminal

       chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

      2. Solution for macOS

      Run this command in you terminal

       open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/Chrome dev session" --disable-web-security


      Adding CORS (Cross-Origin Resource Sharing) header

      When you use your server like Firebase, AWS, or Google Cloud, make changes in your server script. You need to add the following CORS (Cross-Origin Resource Sharing) header as the header in your API code. This header means if the request is from Origin mentioned in the header, then handle the request.

      The solution is divided in 2 parts

      1. CORS preflight issue in Network Image
      2. CORS policy issue when using Rest API


      The CORS policy solution is recommended for development only.

      1. CORS policy issue when fetching Rest API

      The CORS error, solution is available in 2 ways, whichever works for you

      a. Accept request in CORS from Your Server (Recommended)

      On Server side, Here is an example of Node.js code, you can do similar on other server scripts.

      // This will accept request from this domain only
      headers.append('Access-Control-Allow-Origin', 'navoki.com'); // Replace your domain
      headers.append('Access-Control-Allow-Methods', 'GET, DELETE, HEAD, OPTIONS');

      On Client(App) side, Here is an example of Dart HTTP request to above server. This client by any web app made is Flutter Web, React.js etc

      // This will accept request from 
      headers.append('Origin', 'navoki.com'); // Replace your server domain

      b. Accept request in CORS from anywhere (Dev only)

      To temporarily allow any Origin can request from your server. Use this in your development environment only set CORS header as

      // This will accept request from this domain only
      headers.append('Access-Control-Allow-Origin', '*'); // Replace your domain
      // This will accept request from this domain only
      headers.append('Access-Control-Allow-Credentials', 'true');

      c. Using 3rd party CORS proxy (Not Recommended)

      PLEASE DO NOT USE THE PROXY ON A PRODUCTION SITE

      A CORS proxy is a service that allows developers temporarily to access API or Images from other websites, without having to own that website and bypass Flutter Web CORS error.

      This CORS proxy solution is only for students or developers learning networking topics in their programming language. When the Flutter web app sends a request to this 3rd party, it adds the necessary CORS header and returns the original server response to the Flutter web app. You can use any of these proxies

      1. https://corsproxy.github.io/
      2. https://cros-anywhere.herokuapp.com/

      Don’t send sensitive information through the proxy

      On Flutter Web side, Append the your server URL to CORS Proxy URL. An example of HTTP request to a server.

      Syntax: <proxy-url>/<your-server-url>

      var url = Uri.parse("https://corsproxy.github.io/https://example.com/someapi");
      var response = await http.get(url);


      2. CORS preflight issue in Network Image

      You must have tried Image.network() or NetworkImage() widgets on Flutter web app. If the Image url accepts any request as mentioned here then image will be downloaded and shown in web app. But if you are receiving Flutter web CORS issue like below

      Access to XMLHttpRequest at 'https://navoki.com/wp-content/uploads/2019/09/200_40.png' from origin 'http://localhost:9090'
      has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

      The solution is divided in 2 ways, whichever works for you

      1. Using Alternative Flutter widgets to avoid CORS error
      2. Public Image from your server, using CORS header
      3. Public Image from other server, using CORS Proxy

      a. Using Alternative Flutter widgets to avoid CORS error

      Alternative Flutter widgets will not create Flutter Web Cors error, for this you may need to changes some codes. Instead of using Image.network() or NetworkImage() flutter widgets, you can use other Flutter widget available following flutter widgets

      1. ImageElement available in 'dart:html'
      2. Image.memory pass image as encoded base64 string

      Download Source code and try yourself.

      b. Public Image from Own Server, using CORS header

      Use this in your server to make your images publicly available and fetched

      // This will accept request from this domain only
      headers.append('Access-Control-Allow-Origin', '*'); // Replace your domain

      c. Public Image from Other Server, using CORS Proxy

      Use this development mode for testing and learning purpose only. Use URL as mentioned

      Syntax:<proxy-url>/<image-url>

      Image(
           image: NetworkImage(
           'https://cros-anywhere.herokuapp.com/https://navoki.com/wp-content/uploads/2019/09/200_40.png',
             ),
           ),


      Important points to remember

      Use Flutter Web CORS Proxy in development only. Never use it in production because some other server will read your requests and data.

      NOTE: At Client, the IP or domain in Origin and Request Client IP or domain should match. If you are testing from localhost then IP and PORT should be same. Example if you are running server on localhost

      // This will accept request from this localhost only
      headers.append('Access-Control-Allow-Origin', '127.0.0.1:5000'); // Localhost

      Default Methods supported in CORS header are GET and POST

      If need support of PUT, DELETE, OPTIONS Methods in API request are needed, add this extra header on Server

      // This will accept these methods only
      headers.append('Access-Control-Resuest-Method', 'GET, POST, PUT, OPTIONS'); 

      To know more about CORS click here


      Stuck in Flutter ?

      Ask us your Flutter questions in Chat Box

      Follow us on LinkedIn and Discord , Instagram

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter web app example, flutter web cors

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      How Incoming Video Call Notification works in Flutter
      May 4, 2022

      Next post

      Everything about Flutter 3 in Google I/O 2022
      May 12, 2022

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022
      How-to-Create-Flutter-Desktop-Navoki-Blog
      How to Install Flutter on Windows, macOS and Ubuntu
      11 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now

      We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy