1

I'm having an issue previewing my app since switching to loading the data from the VueX store (db.json) file as opposed to the online version of the json file.

On Chrome I'm getting the error:

GET http://localhost:3000/events net::ERR_CONNECTION_REFUSED

On Firefox I'm getting the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/events. (Reason: CORS request did not succeed)

I have tried a few different things such as adding in the Access-Control headers, setting the credentials to true, and trying this on the 127.0.0.1 address as opposed to localhost but still not having any luck.

My EventService.js file that performs the Axios call is:

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, PUT, POST',
    'Access-Control-Allow-Headers': 'Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With'
  }
})

export default {
  getEvents() {
    return apiClient.get('/events')
  },
  getEvent(id) {
    return apiClient.get('/events/' + id)
  },
  postEvent(event) { 
    return apiClient.post('/events', event)
  }
}

It just keeps defaulting back to my NetworkError component fall back when the connection can't be established.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
nathinho89
  • 61
  • 1
  • 6
  • 2
    These access control headers must be sent with the response by the server, not by the client. – Loris Wit Oct 18 '21 at 09:48
  • Sorry I'm not following? The original code (from VueMastery) doesn't include any of the headers and just works, so I'm not entirely sure how to get around the CORS issue when I'm running npm run serve – nathinho89 Oct 18 '21 at 09:51
  • 2
    Your client-side application is fine and doesn't need these headers. What you have to modify is your **server** (running on localhost:3000) so that it sends these headers with each **response**. – Loris Wit Oct 18 '21 at 10:08
  • The error messages in the question indicate the request isn’t even reaching the server — it never gets to the point of the browser receiving a response. That’s what ERR_CONNECTION_REFUSED and *“CORS request did not succeed”* mean. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed. What happens if you try to open http://localhost:3000 directly in any browser? – sideshowbarker Oct 18 '21 at 10:48
  • Thanks @sideshowbarker, I get the message "Unable to connect" which probably explains this. I did go into my Windows Firewall settings earlier to set up inbound and outbound rules (TSP) to allow port:3000 but it looks like this hasn't worked. Have you any suggestions for opening this up? – nathinho89 Oct 18 '21 at 11:03

1 Answers1

4

Posting the answer here to save anyone else a headache.

It looks like I needed to set up a separate vue.config.js file in the root of the project that contained:

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000'
    }
}

I then had to alter the call being performed via my EventService.js file (file that links to the VueX store and db.json) to remove the localhost:3000 from the baseURL as follows:

import axios from 'axios'

const apiClient = axios.create({
 // baseURL: 'http://localhost:3000', // Not required due to proxy
  
  withCredentials: false,
  headers: {
    Accept: 'application/json'
  }
})

export default {
  getEvents() {
    return apiClient.get('/events')
  },
  getEvent(id) {
    return apiClient.get('/events/' + id)
  },
  postEvent(event) { 
    return apiClient.post('/events', event)
  }
}
nathinho89
  • 61
  • 1
  • 6