How to properly configure proxy in vue.config.js?

Question

JavaScript

Good day.
The task is to pass a json file to vuejs via axios (it sends a response from mysql database), which is parsed through a php file (in my case, api.php).

<b>Код App.vue</b>
<script>
export default {
  name: 'app',
 
  data (){
  return{
  info: null,
    members: [],
    }
  },
  mounted: function(){
    this.getM();
  },
  
  methods:{
    getM: function(){
      axios
      .get('api.php')
      .then(response => (this.members = response.data.members));
    }
  }
}
</script>

If I make a production version of the vue project and throw it into the openserver folder, then it parses the information normally and I can display it on the screen, BUT if I work in developer mode in node.js (npm run serve), my application does not parses json.
I can solve the problem if I make a proxy. The official vue website says that for this you need to create a vue.config.js file in the root of the application, which will automatically start and enter this code into it:

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

The problem is that I still can’t parse the information and do n’t even understand if the vue.config.js file is connected and is I entering the right port?
Here is the open server settings window

. I tried to enter different ports, but it still does not work.
Maybe someone knows the solution to this problem?

Answer 1

This setting will change the port for serve, not which port requests will go to. And port 80 is occupied by a web server, which means that serve will not start. You probably open the assembly on localhost and not on localhost:3000. Since the ports are different in your console in dev mode from port 3000, you should write about cors. Either resolve cors, hello headers and http protocol. Or set up the assembly in watch so that you can open it on localhost.