Apache virtual directory configuration and es1EN ES2en reverse proxy setup method

The configuration requirements come from the front and back end separation. How does the backend communicate effectively with the backend using PHP or Java, but the front-end USES frameworks like vue and React. A reverse proxy is a good choice, although jsonp is also available and ordering is not fun.

Apache configure virtual directories

- in fact need through the domain name to access line project, such as http: / / www xxx. com, but in the book on how to configure the virtual domain name to access the machine project?

1. Find the file C:\Windows\System32\drivers\etc\hosts to add the following format contents

127.0.0.1    www.mytest.com // Your virtual domain name 

2. Configure the Apache project directory

1. Find the file \apache\conf\ httpd. conf and modify the contents

# Virtual hosts
Include conf/extra/httpd-vhosts.conf  (Comment on this line # Get rid of) 

2. Find \apache\conf\extra\ httpd-ES43en.conf this file configuration item directory

<VirtualHost *:80>
  ##ServerAdmin webmaster@dummy-host.example.com
  DocumentRoot "C:/xampp/htdocs/mobileApp" ## Your back-end project directory 
  ServerName www.mytest.com ## Virtual domain name 
  ##ServerAlias www.dummy-host.example.com
  ##ErrorLog "logs/dummy-host.example.com-error.log"
  ##CustomLog "logs/dummy-host.example.com-access.log" common
  <Directory "C:/xampp/htdocs/mobileApp"> 
    Options Indexes FollowSymLinks
    DirectoryIndex index.html index.php
    AllowOverride all
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

3.proxyTable agent configuration, taking ES49en-ES50en as an example

  proxyTable: {
   '/api': {
    target: 'http://www.mytest.com/api',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },

This enables cross-domain access.

Example:

  $.ajax({
        url: '/api/indexList.php',
        type: 'GET',
        success: function (data) {
          that.list = data.data;
          console.log(data);
        }
      })