1

I have been searching and reading thru documentation on this topic but I was unbale to make it work. https://cli.vuejs.org/config/#devserver-proxy

I made my Vue.js application normaly by the commnand

vue create my-app

so I'm running the app by command

npm run serve

on http://localhost:8080/. Pretty standart stuff.

But my app needs a PHP backend which is running at https://localhost/ So I setted up the proxy setting in vue.confic.js file in my root directory.

Content of vue.confic.js file:

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'https://localhost/',
                ws: true,
                changeOrigin: true
            }
        }
    }
};

And I'm trying to make axios call for the script on the adress

https://localhost/test.php

The axios call is

mounted() {
    this.$axios.get('api/test.php', {})
        .then(response => { console.log(response.data) })
        .catch(error => { console.log(error) });
    },

But for some reason which i cant figure out I'm still getting

GET http://localhost:8080/api/test.php 404 (Not Found)

Thank you in advance. I'll be happy for any tips.

Marek Barta
  • 344
  • 1
  • 4
  • 17

2 Answers2

0

Your axios call is going to make the request to the API with whatever protocol the webpage is on.

The error shows that you’re making an http call but your webpack config is only spoofing https. Are you visiting https from the page making the request?

Eg https://localhost:8080

You can also try updating your webpack proxy server to look like this

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

Additional debug steps: curl your Api endpoint from your terminal to see if it’s a protocol issue

Jess
  • 3,097
  • 2
  • 16
  • 42
-1

you can try

https: true,

proxy: {
            '/api': {
                target: 'https://localhost/',
                ws: true,
                changeOrigin: true
            }
        }

before try, restart by npm run serve to make it sense