nativescriptfetch-apinativescript-vue

I have a problem when I use fetch in nativescript-vue


When I do a fetch request to ("http://localhost:5000/api") I get this error:

[TypeError: Network request failed: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.]

This is my code I use for trying to fetch the data but I get that error all the time. What is the best way to fix this or is it any other solution to use for fetching and posting data in Nativescript?

methods: {
      getData() {
       fetch("http://localhost:5000/api")
          .then((res) => {
            console.log(res)
       }).catch((err) => {
     console.log(err)
   });

 },

Solution

  • Http is not enabled by default in iOS and Android (v9.0 and above).

    To enable Http requests on iOS, you will have to add the following keys to your App_Resources/iOS/info.plist

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    

    On Android, you will have to add android:usesCleartextTraffic="true" to your application tag of your App_Resources/Android/src/main/AndroidManifest.xml

    <application android:name="com.tns.NativeScriptApplication" 
            ...
            android:usesCleartextTraffic="true">
    

    You may also allow Http communication only on specific domains, refer official iOS / Android docs for more information.