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

Question

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.

@Shivam Sood nope I don't have to write the link as you've have written it, it's the default link unless I provide metadata with annotation like [HttpGet("getusers")] or [Route("getusers")] , plus I've already told you it works just fine in Postman and Web browser — User
@Shivam Sood what's that?? and on which side should I enable CORS? on front-end or back-end? — User
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. you need to enable it in your .net api — Shivam Sood
I wrote it as an answer so that other's can find the solution, if you feel like it you can mark it correct. — Shivam Sood

Shivam Sood Shivam Sood · Accepted Answer · 2019-11-02T21:08:44

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.

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

1 Answers