Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge about "how to solve the problem that the proxy configuration pathRewrite of vue does not take effect". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

proxy configuration pathRewrite override does not take effect

I did not see the situation I encountered when searching online.

devServer: { proxy: { //proxy matches prefix 2 '/api2': { target: 'http://localhost:5001', pathRewrite: {'^/api2': ''}, ws: true, changeOrigin: true }, //proxy matches prefix 1 '/api': { target: 'http://localhost:5000', pathRewrite: {'^/api': ''}, ws: true,) changeOrigin: true } } }

Proxies configured with the/api prefix initially had no problems, then configured with the/api2 prefix, and then lost access to the/api2 prefix.

Reason: Because/api is in front, match/api first, for example, access/api2/test, because/api is matched first, rewrite/api as an empty string, the path becomes 2/test, naturally wrong

Solution: Put/api2 in front of/api, let api2 match first, or call it/api2, so that it cannot match/api first

webpack proxy---pathRewrite

I encountered a problem today. The premise is that I have a local backend with different port numbers. The foreground is 4000, the backend is 3100, and the request method is 4000 proxy to 3100.

proxy to local

The interface request is as follows

http://localhost:4000/api/scoringrules/all //each request is followed by/api

Configuration:

"proxy": { "/api": { "target": "http://localhost:3100", "changeOrigin": true, "pathRewrite": { //If the interface itself does not have/api, you need to rewrite the address via pathRewrite, here/api is converted to ' ' "^/api": "" } } },

pathRewrite: rewrite the path

Replace/api with null when identifying backend, and there is no/api in backend

/api is only used as a way to distinguish between routes and interfaces

Whether or not to configure pathRewrite depends on the front-end request method and the background acceptance method.

ps：

For example, when I was configuring my local

The parameters requested by the front-end have/api to distinguish between web pages and interfaces, but those accepted by the background do not, so they need to be configured as above.

However: when I configure the domain name, the domain name interface address is with/api, so there is no need to configure pathRewrite at this time.

"vue proxy configuration pathRewrite rewrite does not take effect how to solve" the content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.