Getting "XMLHttpRequest" error while using Chrome Web on VS Code

[learner00000]

When I launch my application on Chrome Web using VS Code and try to send a http request to the Backend side, it gives me XMLHttpRequest error and does not work.

When I launch the app on Android Emulator it works. Also I tried to add Allow-All-Origins and other CORS options in my Backend application but still I get the same error.

I also tried to deactivate CORS on Chrome Web but it also didn't work. I don't know if is it necessary to add what solutions I tried and didn't get the answer or not, but I also like to know if is it a Bug or a problem with Flutter or Chrome web?

[learner00000]

I also want to know what address Flutter uses to launch it's application using Chrome web to set it as an Origin in backend side instead of using * wildcard?

[learner00000]

I changed the following line of the code:
final url = Uri.parse('http://10.0.2.2:8000/api/$urlSegment');
Like below:
final url = Uri.parse('http://127.0.0.1:8000/api/$urlSegment');
And the problem seems to be solved, but I am not sure if it is the correct solution or not?

[danagbemava-nc]

Hi @learner00000,

final url = Uri.parse('http://127.0.0.1:8000/api/$urlSegment');

This is indeed the right solution for the web.

The Android Emulator doesn't have a way to access localhost, which is why it was necessary for you to use

final url = Uri.parse('http://10.0.2.2:8000/api/$urlSegment');

But calling that same URL won't work on web because that URL wouldn't actually be accessible.

What you can do so that both URLs work for their respective platforms is to do something like

final host = Platform.isAndroid ? '10.0.2.2' : '127.0.0.1';

final url = 'http://$host:8080/api/$urlSegment';

this way you ensure the right host is used for the right platform. Do note that the above is only for if you're testing with the android emulator.

You could also host your backend and then just use that url. This is what I would recommend.

I also want to know what address Flutter uses to launch it's application using Chrome web to set it as an Origin in backend side instead of using * wildcard?

The app is always launched locally using localhost and a random port. You can set a port when you're launching it by running

flutter run -d chrome --web-port=5000

Of course, the port could be anything you want it to be, so far as that port is available.

[learner00000]

Hi @learner00000,

final url = Uri.parse('http://127.0.0.1:8000/api/$urlSegment');

This is indeed the right solution for the web.

The Android Emulator doesn't have a way to access localhost, which is why it was necessary for you to use

final url = Uri.parse('http://10.0.2.2:8000/api/$urlSegment');

But calling that same URL won't work on web because that URL wouldn't actually be accessible.

What you can do so that both URLs work for their respective platforms is to do something like

final host = Platform.isAndroid ? '10.0.2.2' : '127.0.0.1';

final url = 'http://$host:8080/api/$urlSegment';

this way you ensure the right host is used for the right platform. Do note that the above is only for if you're testing with the android emulator.

You could also host your backend and then just use that url. This is what I would recommend.

I also want to know what address Flutter uses to launch it's application using Chrome web to set it as an Origin in backend side instead of using * wildcard?

The app is always launched locally using localhost and a random port. You can set a port when you're launching it by running

flutter run -d chrome --web-port=5000

Of course, the port could be anything you want it to be, so far as that port is available.

Thank you very much for your help! (Although it doesn't recognize Platform and gives me Undefined name 'Platform'. error).

It was also another question for me to know how can I launch some different widgets/features respect to what platform does the user use? For example I want to either add a camera feature only when user launches the app using the smartphone or add a specific feature only users who use the web version can see and use that widget. I don't know what is the right manner doing that? Should I write separate widgets for mobile and web versions or I must add if statements like what you suggested above, before the widgets may vary respect to the platform.

[danagbemava-nc]

Thank you very much for your help! (Although it doesn't recognize Platform and gives me Undefined name 'Platform'. error).

The Platform class is from the dart:io library, but that library isn't available on web yet, so instead you could use kIsWeb from flutter/foundation.

It was also another question for me to know how can I launch some different widgets/features respect to what platform does the user use? For example I want to either add a camera feature only when user launches the app using the smartphone or add a specific feature only users who use the web version can see and use that widget. I don't know what is the right manner doing that? Should I write separate widgets for mobile and web versions or I must add if statements like what you suggested above, before the widgets may vary respect to the platform.

I will say it depends on the complexity of your designs and what exactly you're trying to achieve. There's a route you could go that will make it easier for you (you wouldn't need to specify a lot of conditionals), but that will involve writing more code.
And with this method, you'd have to make sure that you manage your state more effectively. You could achieve this by using this community package https://pub.dev/packages/responsive_builder, so you don't have to do the work of writing your own widget to handle the various screen sizes.

The other method is to check which platform you're running on and then enable that feature whether or not it is supposed to be there. If your UI isn't all that complex, you could get away with a few conditionals, but it becomes harder to maintain the more conditions you have to specify in your code. One way you could get away with this is to create a "wrapper" widget around the conditions you want.

For example, you can create a MobileVisibilityWrapper widget and then in that widget, specify that the child should only be shown if it matches the conditions for a mobile device and you could do the same for the web, but I'm not sure how well that will scale.

Ultimately, I would say the concept of responsive design on the web can be applied in this context to achieve the desired effect.

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.