5

flutter web API

My API's are working fine in applications but if I'm trying to call API with web so API's are not working

API's are implemented with dio (https://pub.dev/packages/dio)

Welcome for the improvements and thanks in advance for solutions and suggestions.

Vipul Chauhan
  • 189
  • 4
  • 19
  • Keep in mind that web browser outbound access is limited to whatever the Ajax interface can do (or the websocket interface on recent browsers). This is not a full http interface. – Randal Schwartz Mar 04 '21 at 18:15
  • 1
    This is less of a flutter issue and more of a permission issue with the web service. CORS actually keeps your service safe from POST requests from foreign sources...and in your case, localhost is foreign from the web host. Without CORS, anyone could spin up a UI and create a fake login page. Definitely research and read up on CORS. – ReyHaynes Mar 04 '21 at 18:23
  • @RandalSchwartz and @ Randal Schwartz first thanks for your time can you please provide me some solution or suggest me to read to overcome this problem because I don't really have any idea about CORS – Vipul Chauhan Mar 04 '21 at 18:30
  • 1
    For me, I see this problem occur on local development frequently. The browser stops your host (localhost) from accessing another host (like google.com). But usually when you deploy to a service like Firebase, the resource will work since all the data is on that server. Check out these resources to see if they can help you out in your development process: https://flutter.dev/docs/development/platform-integration/web-images#cross-origin-resource-sharing-cors and https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Apealed Mar 04 '21 at 19:31
  • @Apealed I have deployed my web app on firebase hosting but still I'm getting CORS error while trying to hit API (Cross-origin Resource Sharing error: Missing allow Origin Error) – Vipul Chauhan Mar 05 '21 at 15:38
  • Try this solution, It fixed with me. [Dio in Flutter](https://stackoverflow.com/a/66879350/5982350) – Ahmed Sa'eed Dec 06 '21 at 12:32

2 Answers2

1

Disable web security must be turned off and it will work immediately.

This is a CORS (cross-origin resource sharing) issue. You need to enable the CORS request on your server-side to fix this. Depending on your setup, you won't be needing to make changes on the client app.

1- Go to flutter\bin\cache and remove a file named: flutter_tools.stamp

2- Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.

3- Find '--disable-extensions'

4- Add '--disable-web-security'

ALNAJJAR
  • 292
  • 3
  • 11
0

This is a CORS (cross-origin resource sharing) issue. You need to enable the CORS request on your server-side to fix this. Depending on your setup, you won't be needing to make changes on the client app.

Common workarounds made here for development builds is by disabling security using --disable-web-security argument when the app is run.

Omatt
  • 8,564
  • 2
  • 42
  • 144