React Native - How to call c# .NET Web Api from React NAtive

Question

What i have done so far:

I have added my website .net framework 4.7.1 into IIS, i browsed the website and works on http://localhost which i added all the web files to the wwwroot.

I have a values controller that extends Api controller:

        using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web.Http;

    namespace NewsFeedWebApi.Controllers
    {
        public class ValuesController : ApiController
        {
            // GET api/values
            [HttpGet]
            public IEnumerable<string> Get()
            {
                return new string[] { "value1", "value2" };
            }

            // GET api/values/5
            public string Get(int id)
            {
                return "value";
            }

            // POST api/values
            public void Post([FromBody] string value)
            {
            }

            // PUT api/values/5
            public void Put(int id, [FromBody] string value)
            {
            }

            // DELETE api/values/5
            public void Delete(int id)
            {
            }
        }
    }

And this is my React NAtive Code:

        /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow strict-local
     */

    import React, { useState, useEffect } from 'react';
    import { Button, View, Text, StyleSheet, TouchableOpacity, } from 'react-native';

    function App() {



      useEffect(() => {
        // Update the document title using the browser API


        function GetInit(){

          fetch('https://192.168.1.32:80/api/values')
          .then((response) => response)
          .then((json) => {
            console.log(json);
            
          })
          .catch((error) => {
            //alert(error);
            console.log(error);
          });
        }

        GetInit();
      });


      return (
        <View><Text>wwww</Text></View>
      );
    }


    export default App;

In the webconfig i added thisto enable cors:

  <httpProtocol>  
      <customHeaders>  
        <add name="Access-Control-Allow-Origin" value="*" />  
        <add name="Access-Control-Allow-Headers" value="Content-Type" />  
        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />  
       <add name="Access-Control-Allow-Credentials" value="true" />  
      </customHeaders>  
    </httpProtocol>

Can someone tellme where im making a mistake or something im missing?

"i browsed the website", do you mean you used MVC and you accessed a special page or do you mean you got simple a simple response with each request? If it's the latter then you need to ensure you have to have the minimal set of headers being sent from react native. To test that I would test it on Postman or something similar. — Omar Abdel Bari
– Omar Abdel Bari, Commented Dec 27, 2021 at 0:15
You'd want to check what headers your react native app is sending. Many ways of doing including debug (might require injecting some parameters in ASP web api for whatever you are testing) or Fiddler. — Omar Abdel Bari
– Omar Abdel Bari, Commented Dec 27, 2021 at 0:18

redoc01 · Accepted Answer · 2021-12-27 00:35:12Z

1

Because my web app .net framework was working under iis in http rather than https, i just changed the fetch call to this:

fetch('http://192.168.1.32/api/values',{
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    }
  })
  .then((response) => response.json())
  .then((json) => {
    console.log(json);
    
  })
  .catch((error) => {
    //alert(error);
    console.log(error);
  });

and i got the data to return:

["value1", "value2"]

answered Dec 27, 2021 at 0:35

redoc01

2,5295 gold badges36 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native - How to call c# .NET Web Api from React NAtive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related