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, Nov 02 '19 at 16:18
@Shivam Sood what's that?? and on which side should I enable `CORS`? on front-end or back-end? — User, Nov 02 '19 at 16:22
`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, Nov 02 '19 at 16:26
@ShivamSood you were right, I've configured `CORS` to allow any website to work with api written in Asp.net core, thanks a lot, you are awesome. **thumbs up** — User, Nov 02 '19 at 19:36
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, Nov 02 '19 at 21:08

score 1 · Accepted Answer · answered Nov 02 '19 at 21:08

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 Answers1