CODEWITHSUNDEEP
c#vue.jsasp.net-coreaxiosasp.net-core-webapi
User
User

Reputation: 123

Axios could not fetch data from asp.net core web service

I'm trying to fetch data from web service in asp.net core but I keep getting error message instead, though, I had tried the same URL in Postman and also in web browser, and it worked just fine; notice that I've disabled SSL in asp.net core to make it work with HTTP I even provided some configurations like Content-Type, but I still get the same error.

in Vue.js

    fetch(e) {

       e.preventDefault();

       const axiosConfiguration = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Accept': 'application/json'
                }
            }


  axios.get('http://localhost:62750/api/users/',axiosConfiguration ).then( response => {
                     alert(JSON.stringify(response))
                 }).catch(e => {
                    alert(JSON.stringify(e))
                 })

            }

in C# Asp.net Core

    [Route("api/[controller]")]
    [ApiController]
    public class UsersController : ControllerBase
    {
        private readonly SchoolContext _context;

        public UsersController(SchoolContext context)
        {
            _context = context;
        }


        [HttpGet]
        public async Task<ActionResult<IEnumerable<Users>>> GetUsers()
        {
            return await _context.Users.ToListAsync();
        }

    }

Error I get

{"message":"Network Error","name":"Error","stack":"Error: Network Error\n at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)\n at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:81:14)","config":{"url":"http://localhost:62750/api/users","method":"get","headers":{"Accept":"application/json, text/plain, /"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1}}

Thanks in advance.

Upvotes: 1

Views: 3322

Answers (1)

Shivam
Shivam

Reputation: 3642

You have to configure CORS on your .net core API. CORS is Cross Origin Resource Sharing which basically means when you are making request to different PORT it is blocked by default, so you need to enable it in order to make request to localhost:62750 from different PORT.

Here's one example on how you can do it.

Upvotes: 1

Related Questions