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
– User, Commented Nov 2, 2019 at 16:18
@Shivam Sood what's that?? and on which side should I enable CORS? on front-end or back-end? — User
– User, Commented Nov 2, 2019 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
– Shivam, Commented Nov 2, 2019 at 16:26
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
– Shivam, Commented Nov 2, 2019 at 21:08

Shivam · Accepted Answer · 2019-11-02 21:08:44Z

1

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.

answered Nov 2, 2019 at 21:08

Shivam

3,6622 gold badges15 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related