Use Axios.Get with params and headers in transfer to WebApi Controller -Transfer data Failed

0
votes

Hi I am working on React with webapi. I have a Problem in transfer data to webapi Controller with headers and parameters.see my code given below.

React Js

 import React from 'react';
import axios from 'axios';

class Profile extends React.Component {

constructor(props) {
    super(props);
    this.state = {

    }
}

 componentDidMount() {
    var access_token = "12121212121";
    var username = "Test";
    var guid= "W3432";

    let config = {
        headers: { Authorization: access_token,Username:username } ,
        params: {guid}
    }
       axios.get('http://localhost:XXXX/Api/Authenticate/Getprofiledetails', config).then(response => {
        console.log(response.data)  
    })
        .catch(function (error) {
            console.log(error);
        })
}


}

Controller (Web Api2)

public class AuthenticateController : ApiController
{
[Route("Api/Authenticate/Getprofiledetails/{id}")]
    [HttpGet]
    public IHttpActionResult Getprofiledetails(Guid id)
    {
        try
        {

            return Ok("Done");
        }
        catch (Exception ex)
        {

            throw ex;
        }
    }}

Webapi.config

config.Routes.MapHttpRoute(
           name: "DefaultApi1",
           routeTemplate: "api/{controller}/{action}/{id}",
           defaults: new { id = RouteParameter.Optional }
       );

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

Error

Message: "No HTTP resource was found that matches the request URI 'http://localhost:XXXX/Api/Authenticate/Getprofiledetails?guid=W3432'." MessageDetail: "No action was found on the controller 'Authenticate' that matches the name 'Getprofiledetails'."

2
reactjsasp.net-mvcreact-nativeasp.net-web-apiasp.net-web-api2

2 Answers

0
votes

Looks like you don't have the appropriate controller in your web api to recive that kind of request. You should put the id as part of the url: 'http://localhost:XXXX/Api/Authenticate/Getprofiledetails/W3432'

0
votes

Change Code:

 componentDidMount() {


    var access_token = localStorage.getItem('access_token');
    var username = localStorage.getItem('user');
    var guid= localStorage.getItem('Guiid');


       axios.get('http://localhost:XXXX/Api/Authenticate/Getprofiledetails'+'/'+ guid,  { headers: { Authorization: access_token,Username:username } }).then(response => {
        console.log(response.data)  
    })
        .catch(function (error) {
            console.log(error);
        })


}