How to set up a reverse proxy using webpack
This time I will show you how to use webpack to set up a reverse proxy, and what are the precautions for using webpack to set up a reverse proxy. The following is a practical case, let's take a look.
1. Reasons for setting up a proxy
Now the requirements for front-end development are getting higher and higher, and with the birth of automation and modularization , the front-end and back-end development model is becoming more and more popular. The backend is only responsible for the interface, and the frontend is responsible for data display and logical processing. However, there is an important issue in the front-end and back-end development model, which is the cross-domain issue.
2. How to configure the webpack agent
The webpack agent requires another plug-in: webpack-dev-server
webpack -dev-server is very convenient to configure the proxy. You only need to condition a proxy attribute and then configure the relevant parameters:
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
entry: {
app: ['./src/js/index.js'],
vendors: ['jquery', 'moment'], //需要打包的第三方插件
// login:['./src/css/login.less']
},
//输出的文件名,合并以后的js会命名为bundle.js
output: {
path: path.join(__dirname, "dist/"),
publicPath: "http://localhost:8088/dist/",
filename: "bundle_[name].js"
},
devServer: {
historyApiFallback: true,
contentBase: "./",
quiet: false, //控制台中不输出打包的信息
noInfo: false,
hot: true, //开启热点
inline: true, //开启页面自动刷新
lazy: false, //不启动懒加载
progress: true, //显示打包的进度
watchOptions: {
aggregateTimeout: 300
},
port: '8088', //设置端口号
//其实很简单的，只要配置这个参数就可以了
proxy: {
'/index.php': {
target: 'http://localhost:80/index.php',
secure: false
}
}
}
..........
};In the above example, we set the local port number to: 8088. If at this time The interface is placed on the server with port 80, and the interface URL we request is as follows: http://localhost:80/index.php
At this time, we only need to use regular expression matching /index in the proxy. php, and then match the target interface set by the redirect target; when using the ajax request interface, do not write the domain name of the target interface, just write index.php.
$.ajax({
type: 'GET',
url: '/index.php',
data: {},
dataType: 'json',
beforeSend: function () {
},
success: function (data) {
},
error: function (error) {
}
});I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to sort json objects and delete data with the same id
How to perform mvvm in actual projects -simple two-way binding
The above is the detailed content of How to set up a reverse proxy using webpack. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use Nginx with FastAPI for reverse proxy and load balancing
Aug 01, 2023 am 09:44 AM
How to use Nginx with FastAPI for reverse proxy and load balancing Introduction: FastAPI and Nginx are two very popular web development tools. FastAPI is a high-performance Python framework, and Nginx is a powerful reverse proxy server. Using these two tools together can improve the performance and reliability of your web applications. In this article, we will learn how to use Nginx with FastAPI for reverse proxy and load balancing. What is reverse generation
Detailed explanation of reverse proxy and request forwarding in Gin framework
Jun 23, 2023 am 11:43 AM
With the rapid development of web applications, more and more enterprises tend to use Golang language for development. In Golang development, using the Gin framework is a very popular choice. The Gin framework is a high-performance web framework that uses fasthttp as the HTTP engine and has a lightweight and elegant API design. In this article, we will delve into the application of reverse proxy and request forwarding in the Gin framework. The concept of reverse proxy The concept of reverse proxy is to use the proxy server to make the client
How to install, uninstall, and reset Windows server backup
Mar 06, 2024 am 10:37 AM
WindowsServerBackup is a function that comes with the WindowsServer operating system, designed to help users protect important data and system configurations, and provide complete backup and recovery solutions for small, medium and enterprise-level enterprises. Only users running Server2022 and higher can use this feature. In this article, we will explain how to install, uninstall or reset WindowsServerBackup. How to Reset Windows Server Backup If you are experiencing problems with your server backup, the backup is taking too long, or you are unable to access stored files, then you may consider resetting your Windows Server backup settings. To reset Windows
Solution to PHP Session cross-domain problem
Oct 12, 2023 pm 03:00 PM
Solution to the cross-domain problem of PHPSession In the development of front-end and back-end separation, cross-domain requests have become the norm. When dealing with cross-domain issues, we usually involve the use and management of sessions. However, due to browser origin policy restrictions, sessions cannot be shared by default across domains. In order to solve this problem, we need to use some techniques and methods to achieve cross-domain sharing of sessions. 1. The most common use of cookies to share sessions across domains
Nginx reverse proxy cache configuration to accelerate static web page access
Jul 04, 2023 pm 06:09 PM
Nginx reverse proxy cache configuration to achieve static web page access acceleration Introduction: With the rapid development of the Internet, access speed has become a very important factor in website operations. In order to improve the access speed of web pages, we can use Nginx reverse proxy caching technology to accelerate web pages. This article will introduce how to use Nginx to configure reverse proxy cache to accelerate static web pages. Nginx reverse proxy cache configuration: Install Nginx: First you need to install the Nginx server, which can be done through apt-ge
How to use Nginx Proxy Manager to implement reverse proxy under HTTPS protocol
Sep 26, 2023 am 08:40 AM
How to use NginxProxyManager to implement reverse proxy under HTTPS protocol. In recent years, with the popularity of the Internet and the diversification of application scenarios, the access methods of websites and applications have become more and more complex. In order to improve website access efficiency and security, many websites have begun to use reverse proxies to handle user requests. The reverse proxy for the HTTPS protocol plays an important role in protecting user privacy and ensuring communication security. This article will introduce how to use NginxProxy
Using Nginx Proxy Manager to implement reverse proxy load balancing strategy
Sep 26, 2023 pm 12:05 PM
Use NginxProxyManager to implement reverse proxy load balancing strategy NginxProxyManager is an Nginx-based proxy management tool that can help us easily implement reverse proxy and load balancing. By configuring NginxProxyManager, we can distribute requests to multiple backend servers to achieve load balancing and improve system availability and performance. 1. Install and configure NginxProxyManager
Nginx reverse proxy cache configuration to improve website access speed
Jul 04, 2023 pm 10:01 PM
Nginx reverse proxy cache configuration to improve website access speed Introduction: In the Internet era, website access speed is crucial. A website that loads slowly makes users impatient and can lead to user churn. In order to improve the access speed of the website, a common way is to reduce the load on the server and speed up the loading of the page by using reverse proxy cache. This article will introduce how to use Nginx to configure reverse proxy cache to improve website access speed. 1. What is Nginx reverse proxy cache? Ngin
