How to use http-proxy in webpack-dev-server (detailed tutorial)
This article mainly introduces the detailed explanation of webpack-dev-server's use of http-proxy to solve cross-domain problems. Now I share it with you and give you a reference.
Documentation
webpack's official introduction to webpack-dev-server opening proxy
Vue-cli proxyTable solves cross-domain problems in the development environment— —Although this article is written about vue, it can be used on webpack-dev-server in the same way
http-proxy-middleware——The implementation method of webpack-dev-server is actually an encapsulation of this
Configure http-proxy
Configure in the webpack configuration file (webpack.config.js)
module.exports = {
...此处省略一万字
// webpack-dev-server的配置
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port: 3000,
host: '10.0.0.9',
proxy: {
'/test/*': {
target: 'http://localhost',
changeOrigin: true,
secure: false
}
}
},
...此处省略一万字
};In the above configuration, about http-proxy It’s just the value in proxy: {...}
Calling interface
For the sake of convenience, the following uses the ajax function encapsulated by jquery for demonstration
$.ajax({
// url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
url: '/test/testFetch/Login.php', // 这样行
type: 'post',
data: {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
},
success: function(data) {
console.log(data);
}
});Some parameter descriptions in proxy
'/test/*' and target: 'http://localhost'
It can be seen from the name, This actually redirects the domain name of the API matching the format of '/test/*' to 'http://localhost'
You can see it in combination with the "call interface" above. The sentence url: '/test/testFetch/Login.php' will actually automatically add the prefix, that is to say, url: '/test/testFetch/Login.php' is equivalent to url: 'http:// 10.0.0.9:3000/test/testFetch/Login.php'
However, we use http-proxy for redirection, in this case, url: '/test/testFetch/Login .php' is equivalent to url: 'http://localhost/test/testFetch/Login.php'
changeOrigin
true/false, Default: false - changes the origin of the host header to the target URL
The local virtual server will receive your request and send it on your behalf Request - This is what others say
I tried it, even if this parameter is set to false, it is OK in some cases. The specific reason is unknown, so it is better to set it to true.
secure
true/false, if you want to verify the SSL Certs
pathRewrite
Example: pathRewrite: {'^/api': ''}
Object-keys will be used as RegExp to match paths
I guess, '^/api' is replaced by '' (just my guess, it didn't work, I guess it's me The regular expression cannot be written well)
Attached is the code for using the Fetch API
The above code and the "call interface" use $. The effect achieved by ajax() is the same
let testAsync = async function () {
var feeling = {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
};
var fetchParams = {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'include', // 将凭证也带上（例如cookies）
body: JSON.stringify(feeling),
};
let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());
console.log(temp); // 这个就是一个json对象
return temp;
};
let data = testAsync(); // async函数返回值是一个Promise对象
console.log(data); // 这个是一个Promise对象The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to monitor window.resize in VueJs and how to implement it specifically?
Detailed interpretation of the concept of $window window object in AngularJS
How to implement React-native bridging to Android, and what are the specific steps?
How to develop a custom instruction directive in vue
How to develop a custom instruction directive in vue
Detailed interpretation of how layui parent-child windows pass parameters
How to implement image component image adaptive display in WeChat applet
The above is the detailed content of How to use http-proxy in webpack-dev-server (detailed tutorial). 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
What does http status code 520 mean?
Oct 13, 2023 pm 03:11 PM
HTTP status code 520 means that the server encountered an unknown error while processing the request and cannot provide more specific information. Used to indicate that an unknown error occurred when the server was processing the request, which may be caused by server configuration problems, network problems, or other unknown reasons. This is usually caused by server configuration issues, network issues, server overload, or coding errors. If you encounter a status code 520 error, it is best to contact the website administrator or technical support team for more information and assistance.
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
Understand common application scenarios of web page redirection and understand the HTTP 301 status code
Feb 18, 2024 pm 08:41 PM
Understand the meaning of HTTP 301 status code: common application scenarios of web page redirection. With the rapid development of the Internet, people's requirements for web page interaction are becoming higher and higher. In the field of web design, web page redirection is a common and important technology, implemented through the HTTP 301 status code. This article will explore the meaning of HTTP 301 status code and common application scenarios in web page redirection. HTTP301 status code refers to permanent redirect (PermanentRedirect). When the server receives the client's
HTTP 200 OK: Understand the meaning and purpose of a successful response
Dec 26, 2023 am 10:25 AM
HTTP Status Code 200: Explore the Meaning and Purpose of Successful Responses HTTP status codes are numeric codes used to indicate the status of a server's response. Among them, status code 200 indicates that the request has been successfully processed by the server. This article will explore the specific meaning and use of HTTP status code 200. First, let us understand the classification of HTTP status codes. Status codes are divided into five categories, namely 1xx, 2xx, 3xx, 4xx and 5xx. Among them, 2xx indicates a successful response. And 200 is the most common status code in 2xx
http request 415 error solution
Nov 14, 2023 am 10:49 AM
Solution: 1. Check the Content-Type in the request header; 2. Check the data format in the request body; 3. Use the appropriate encoding format; 4. Use the appropriate request method; 5. Check the server-side support.
How to implement HTTP streaming using C++?
May 31, 2024 am 11:06 AM
How to implement HTTP streaming in C++? Create an SSL stream socket using Boost.Asio and the asiohttps client library. Connect to the server and send an HTTP request. Receive HTTP response headers and print them. Receives the HTTP response body and prints it.
What status code is returned for an HTTP request timeout?
Feb 18, 2024 pm 01:58 PM
The HTTP request times out, and the server often returns the 504GatewayTimeout status code. This status code indicates that when the server executes a request, it still fails to obtain the resources required for the request or complete the processing of the request after a period of time. It is a status code of the 5xx series, which indicates that the server has encountered a temporary problem or overload, resulting in the inability to correctly handle the client's request. In the HTTP protocol, various status codes have specific meanings and uses, and the 504 status code is used to indicate request timeout issues. in customer
How to solve HTTP 503 error
Mar 12, 2024 pm 03:25 PM
Solution: 1. Retry: You can wait for a period of time and try again, or refresh the page; 2. Check the server load: Check the server's CPU, memory and disk usage. If the capacity limit is exceeded, you can try to optimize the server configuration or increase the capacity. Server resources; 3. Check server maintenance and upgrades: You can only wait until the server returns to normal; 4. Check network connection: Make sure the network connection is stable, check whether the network device, firewall or proxy settings are correct; 5. Ensure cache or CDN configuration Correct; 6. Contact the server administrator, etc.
