CODEWITHSUNDEEP
nativescriptfetch-apinativescript-vue
Nordens Tak
Nordens Tak

Reputation: 27

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

 },

Upvotes: 1

Views: 666

Answers (1)

Manoj
Manoj

Reputation: 21908

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.

Upvotes: 4

Related Questions