CODEWITHSUNDEEP
phpvue.jswebserver
user8064730
user8064730

Reputation:

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

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

Upvotes: 5

Views: 12832

Answers (3)

tecs
tecs

Reputation: 11

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
      }
    }
  }
}

Upvotes: 1

Charles G
Charles G

Reputation: 1381

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') {  }

Upvotes: 1

DominikAngerer
DominikAngerer

Reputation: 6530

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

Upvotes: 5

Related Questions