How to use Vue.js and PHP on one server?

Question

So currently I have built an application that uses Vue.js and PHP. The PHP is my backend and talks a mysql database.

I am running this on my local machine (Mac). When I run my vue.js side, I use the command npm run dev This starts a webserver and I view it by going to address localhost:8080.

Then for the PHP I start another web server using MAMP. This runs Apache and Mysql. To access these they are stored at localhost:8888.

I make post and get requests from the vue.js side to the PHP side. And the only way I can get this to work is by using a chrome extension called: Allow control Allow origin. Otherwise I get a cross origin error and they won't communicate.

Is there therefore a way that I can run both on the same webserver? I'm not sure how

Have you tried this? https://gist.github.com/odan/066d9848b72cdd4f0feff1b592696eab — odan, Feb 04 '18 at 20:55
The link provided by @DanielO is exactly what you need to follow. It's pretty much just pre-compiling everything and then calling the script in the footer. — Stark, Feb 04 '18 at 21:16
try adding header("Access-Control-Allow-Origin: *"); to the top of you .php file — Shane G, Mar 12 '18 at 10:14
Try using webpack dev server proxy: https://stackoverflow.com/a/46796258/586678 — joshas, Mar 28 '18 at 20:43

score 5 · Answer 1 · answered Sep 25 '18 at 04:23

Since you want to deploy your Vue.js application and PHP on one server you do have multiple options.

Approach 1. Different Domains

Let's assume your PHP application is only an API, so one could argue that you could host it on something like api.example.org and do your calls to that Domain. This will require you to add header("Access-Control-Allow-Origin: THE_FRONTEND_DOMAIN"); - please don't use header("Access-Control-Allow-Origin: *"); in production environment if you do not want to have the whole internet have access to those endpoints. After setting that up you can now host your Vue.js application on www.example.org and perform the calls to api.example.org.

PHP: api.example.org
Vue: www.example.org

Approach 2. Same Domain / Different folder

If you do not want two different domains you can reserve one route for your API. This would allow you to host both PHP and Vue.js on the same domain. So basically let's assume we want to have our PHP application available on www.example.org/api/ all we would have to do is to upload our PHP files at that level. After uploading our API there we will have to upload Vue.js in the root level and configure our Webserver (Nginx, Apache) accordingly so it won't rewrite the /api/ urls.

PHP: www.example.org/api/
Vue: www.example.org

score 1 · Answer 2 · answered Apr 04 '19 at 11:23

Nothing to do add on the vue file. CORS must be allowed on the SERVER.

The client will send OPTIONS request before sending POST request.

The server have to handle the OPTIONS request then to allow Origin and content-type.

Put this on the php


    <?php
    // skip OPTIONS method
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
        header('Access-Control-Allow-Headers: token, Content-Type');
        header('Access-Control-Max-Age: 1728000');
        header('Content-Length: 0');
        header('Content-Type: text/plain');
        die();
    }
    // allow every url
    header('Access-Control-Allow-Origin:  *');
    header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
    // allow content type !!IMPORTANT
    header('Content-Type: application/json');

    //Because the content-type sent by vuejs is application/json, you will not be able to read data via the $_POST $_GET or $_REQUEST variable.
    $post = json_decode(file_get_contents('php://input'), true);

    if($post['username']=='hello') {  }

tecs · Answer 3 · 2022-07-21T20:24:31.590

You need edit `vue.config.js` once:

module.exports = {
  outputDir: '../build',
  publicPath: '/',
  devServer: {
    headers: { "Access-Control-Allow-Origin": "*" },
    https: false,
    port: 8080,
    host: 'localhost', /* its your Vue.app url */
    proxy: {
      '/admin/*': {
        target: 'http://localhost:8888', /* its your API-server url */
        ws: true,
        changeOrigin: true
      }
    }
  }
}

How to use Vue.js and PHP on one server?

3 Answers3

Approach 1. Different Domains

Approach 2. Same Domain / Different folder

You need edit vue.config.js once:

You need edit `vue.config.js` once: