php Question posted in
Official manual can be found here.

Vue based client with axios has problem to communicate with php backend

Here is the specification:
I’ve made frontend vue website with router and simple php test backend.
After build folder structure looks like this:

public_html_
├── css
├── js
├── favicon.ico
├── index.html
├── style.css
├── .htaccess
└── lipton
    └── index.php

Then I create docker with litespeed img to serve the app.
All elements form public_html are going to /var/www/vhosts/localhost/html/
To heal router i’ve add .htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteRule ^lipton - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

After opening the page i want to "login" by this fn but failed

const callApi = async () => {
  const url = 'localhost/lipton/'
  try {
    const response = await axios.post(url, {
      username: login.value,
      password: password.value
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error occured:', error);
  }
};

// respose content
<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" href="favicon.ico">
        <link rel="stylesheet" href="./style.css">
        <script defer="defer" src="js/chunk-vendors.c9dd1c52.js"></script>
        <script defer="defer" src="js/app.89866d1c.js"></script>
        <link href="css/app.1defc4ab.css" rel="stylesheet">
    </head>
    <body>
        <noscript>
            <strong>We're sorry but aleksandra_zalinska doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
    </body>
</html>

When i use postman i get {"message":"Login successful"} so php backend clearly works properly.
What can be the problem?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here are screens:

    1. Manually typed adres to the serwer manually typed adres to the serwer

    2. Postman result postman succes

    3. Updated url in fn axiox post

    4. Login execution from login page check url enter image description here

    Console does't throw error or any log. In payload is this: enter image description here


  2. 0

    May be You must change your const url = 'localhost/lipton/' to const url = 'http://localhost/lipton/' . Share please what you get in developer tools console when error occurs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search