Web Front-end
JS Tutorial
Analysis of common problems in the http proxy library http-proxy in nodejs
Analysis of common problems in the http proxy library http-proxy in nodejs
The content of this article is about the analysis of common problems in the http proxy library http-proxy in nodejs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
http-proxy
http-proxy is a nodejs http proxy library, which has been integrated by webpack-dev-server and used as a proxy. The reason is that today, when the separation of front-end and back-end is popular, if we need to adjust the back-end API interface locally without configuring hostname, it will inevitably be a cross-domain request. Because of the cross-domain security restrictions of the browser, the call is blocked, so the local proxy has become a must for a local development environment.
'/saasapi/*': {
target: 'http://ebk.17u.cn',
},The meaning is probably to redirect the ajax request starting with saasapi to http://ebk.17u.cn
There is no problem with local development, and the same is true for online development If a server using nodejs happens to be configured with a proxy, unexpected problems may occur when deployed online~
Backend nginx is configured with a reverse proxy
The main domain name of a website is 17u. cn, if multiple api services are deployed on the backend, then his api service may look like this
| Primary domain name | Secondary domain name 1 | Second-level domain name 2 | Second-level domain name 3 |
|---|---|---|---|
| ebk.17u .cn | ebk2.17u.cn | ebk3.17u.cn |
I can’t think of my sister!
After carefully checking the http information, I found that after the ajax requests of several services were sent to the server, the hostname was the domain name of the browser, and the reverse proxy configuration of nginx was forwarded based on the hostname. Because our hostname is unfamiliar to nginx, it is forwarded to the default first service by default.
I checked the http-proxy configuration, haha, indeed there is such a modified configuration, just change it a little.
'/saasapi/*': {
target: 'http://ebk.17u.cn',
changeOrigin: true
},It means just change the hostname to be consistent with the target. In this way, the backend nginx can forward normally. The backend is configured with cookie Path
The backend api not only configures the second-level domain name, but also configures the second-level directory. The services deployed on the front-end also require the second-level directory.
The api address will look like this:
ebk.17u.cn/saasapi
Front-end address:
trans.17u.cn/saas
Adjust the proxy configuration accordingly
'/saas/saasapi/*': {
target: 'http://ebk.17u.cn',
changeOrigin: true,
rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},This looks normal, right? , but what’s the problem? The backend also sets the path for the cookie set after logging in:
Path='/saasapi'. The problem arises.
The cookie below /saasapi cannot be read under the current domain name, causing the front-end to log in every time All passed, but the api cannot be adjusted normally. Every time it is called, it prompts that you are not logged in. If you have any questions, please check the documentation first.
I still found a solution
cookiePathRewrite: { '/saasapi': '/saas/saasapi' }Just rewrite the cookie path. Similarly, if the backend interface specifies the domain of the cookie, there is still a solution
cookieDomainRewrite
Also There are some other rewrites that should be easier to use.
ps: In the process of solving the problem, I found that the modification was always unsuccessful. I once suspected that it was a bug in the library. Later I found that I needed to clear chrome's cookies.
Click Application -> Cookie: It is not possible to delete the following cookies. All cookies cannot be cleared. You need to go to Application -> clear storage and clear site data. Final success
Related recommendations:
Detailed analysis and difference comparison of front-end modularization in JsWhat are the methods in jQuery ?Commonly used methods in jQuery (with code)The difference and conversion between jQuery objects and native DOM objectsThe above is the detailed content of Analysis of common problems in the http proxy library http-proxy in nodejs. 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
1662
14
1419
52
1313
25
1262
29
1235
24
PHP and Vue: a perfect pairing of front-end development tools
Mar 16, 2024 pm 12:09 PM
PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two
Is Django front-end or back-end? check it out!
Jan 19, 2024 am 08:37 AM
Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
Django: A magical framework that can handle both front-end and back-end development!
Jan 19, 2024 am 08:52 AM
Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning
Questions frequently asked by front-end interviewers
Mar 19, 2024 pm 02:24 PM
In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Combination of Golang and front-end technology: explore how Golang plays a role in the front-end field
Mar 19, 2024 pm 06:15 PM
Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn
