How to configure Apache virtual directory and set up vue-cli reverse proxy
Editor to share with you how to configure the Apache virtual directory and set up the vue-cli reverse proxy, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Configuration requirements come from the separation of front and rear ends. Due to the use of PHP or Java in the background, but how to communicate effectively with the back end when the front end uses vue,React. Reverse proxy is a good choice, although jsonp is fine, but it's not fun.
Apache configuration virtual directory
-in fact, online projects need to be accessed through domain names, such as http://www.xxx.com, but how to configure virtual domain names on the local machine to access local projects?
1. Find the file C:\ Windows\ System32\ drivers\ etc\ hosts to add the following format
127.0.0.1 www.mytest.com / / your virtual domain name
two。 Configure the Apache project directory
1. Find the file\ apache\ conf\ httpd.conf and modify the content
# Virtual hostsInclude conf/extra/httpd-vhosts.conf (comment on this line # removed)
two。 Find the file\ apache\ conf\ extra\ httpd-vhosts.conf to configure the project directory
# # ServerAdmin webmaster@dummy-host.example.com DocumentRoot "C:/xampp/htdocs/mobileApp" # # your backend project directory ServerName www.mytest.com # # virtual domain # # ServerAlias www.dummy-host.example.com # # ErrorLog "logs/dummy-host.example.com-error.log" # # CustomLog "logs/dummy-host.example.com-access.log" common Options Indexes FollowSymLinks DirectoryIndex index.html index.php AllowOverride all Order allow,deny Allow from all
3.proxyTable proxy configuration, taking vue-cli 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);}}) these are all the contents of the article "how to configure the Apache virtual directory and set up the vue-cli reverse proxy". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
