Preface
Because I encountered this bug in the project: Vue cil2 successfully configured proxy proxytable, but the error 404 was reported. When both the backend and the proxy are configured correctly, it is still reported 404. It has been solved first, and it is recorded specifically, hoping to help others;
text
1. Why use a proxy?
The function of the proxy is: forward the request proxy to the middleware of other servers;
For example: Our current host is http://localhost:8080/. Now we have a requirement. If we request /api, we do not want 3000 to handle this request, but another server /api to handle this request?
At this time, you have to use a proxy to solve the problem!
2. How to use multiple proxy in vue?
= {
dev: {
proxyTable: {
// The first agent '/api-test': {
target: ':', /// Target server host ws:true, //Whether to enable websocket secure: true, // If it is the https interface, you need to configure this parameter changeOrigin: true, // // Default false, whether it is necessary to change the original host header to the target URL, whether it is cross-domain pathRewrite: {
'^/api-test/old': '/api-test/new' // Rewrite the request, for example, our source access is api-test/old, then the request will be parsed as /api-test/new },
//The second agent '/api-else': {
target: 'https://197.32.22.33:8090',
ws:true, //Whether to enable websocket secure: true,
changeOrigin: true,
pathRewrite: {
'^/api-else': '' //The default writing method is, if pathRewrite is not written, the default is empty; },
//The third agent '/api-three': {
target: 'https://197.32.22.33:9090',
changeOrigin: true,
pathRewrite: {
'^/api-three': '/api-three' //Rewrite the request so that the local request will not have twice /api-three },
}
},
The above code can configure the proxy in the vue-cil project;
There are many parameters of the proxy, you can view it in detail:http-proxy-middlewareOptions in it, add them yourself;
Let's analyze why: Vue proxying local proxytable succeeded but failed to report error 404.
3. Bug Cause Analysis
1. Test whether the interface is accessed normally in the browser or postman; (most importantly!! Otherwise, it will be useless if you modify it for a long time)
Then how is a successful visit?
For example: Take the second proxy as an example: the interface you want to access is https://197.32.22.33:8090/api-else/, and then go to the next step after directly entering the return value in the browser and testing it is correct;
2. Make sure the writing style is completely correct!
2.1 (Reference Writing Method 2) At this time, the interface address you request locally will become: http://localhost:8080/api-else/api-else/ is normal!
Are you curious why there are two /api-else, because local: http://localhost:8080/api-else is equivalent to: https://197.32.22.33:8090, which is normal!
2.2 (Reference writing method 3)
If the above-mentioned writing method is still incorrect, you can refer to the route of writing method 3 to change the test. Example: The interface you want to access is https://197.32.22.33:9090/api-three/. After local configuration: http://localhost:8080/api-three/.
Let me say one more thing, why do you need to mention the third way of writing?
This is suitable for the front-end and back-end separation of multiple back-end projects. The package name of the back-end project is: api-three. The second writing method is used. After packaging, there will be a request problem in deploying the production environment (the pitfalls we have struck on by our own project, occasionally). Therefore, it is stipulated that the agent and the back-end package names are unified, and they cannot be written directly in the request. Instead, after configuring the agent, the agent's request will be rewrite and point to the package name;
3. Please modify the config and promise me to restart the project npm run dev;
4. It is also the reason for my bug this time (serious face, this is super subtle!)
When multiple proxy configurations, the proxy names cannot be the same or overlapping!
Error demonstration (second proxy invalid):
proxyTable: {
// The first agent '/api-test': {
target: ':', /// Target server host },
//The second agent '/api-testAAA': {
target: 'https://197.32.22.33:8090',
}
This error is really hard to find, and you can only understand it after checking the source code;
Let me tell you why I can write this way 404!
vue's proxy is based onhttp-proxy-middlewareImplemented, and http-proxy-middleware's method of taking which proxy name is as follows:
function matchSingleStringPath(context, uri) {
const pathname = getUrlPathName(uri);
return (context) === 0;
}
Yes! He used indexOf() === 0 to judge! ! ! So if your multiple proxy overlaps /api-testAAA and /api-test, they will all return true!
However, /api-test is judged faster, so /api-testAAA becomes invalid! ! !
Conclusion
Note: The version number of Vue cil is 2, the old version of the project; the learning process of the new version of vue cil 3+ will be recorded later;
Okay, I've finished complaining, I hope everyone won't get into the trap~
Supplementary knowledge:Problem about Vue's production environment proxyTable proxy
1. Find the proxyTable configuration item in the config/ configuration file
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
// secure:false proxy https must be added pathRewrite: {
// 1 '^/api': '/api' This interface is configured http://xxx:8080/api/getlist // 2 ^/api': '/' This interface is configured http://xxx:8080/getlist }
}
}
}
2. The difference between 1 and 2 in the above code
When your interface has APIs, you need ^api means that if there is API, you will use APIs first to prevent the system from being considered by the 3 APIs. If there is no API in the interface, it is not needed, that is, it can be omitted. Summary:
The interface starts with "/api" with the number 1, if not, it is not needed
3. If multiple proxy configurations are configured
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
pathRewrite: {
// A '^/api': '/api' This interface is configured http://xxx:8080/api/getlist // ^/api': '/' This interface is configured http://xxx:8080/getlist }
}，
'/api/1': { //
target: 'http://xxx:8081',
changeOrigin: true,
pathRewrite: {
// A '^/api/1': '/api/1' This interface is configured http://xxx:8081/api/1/getlist // ^/api/1': '/' This interface is configured http://xxx:80801/getlist }
}
}
}
When calling the interface above:
A /api/1/getlist http://xxx:8081/api/1/getlist
/api/getlist http://xxx:8080/api/getlist
The second situation
/api/1/getlist http://xxx:8081/getlist
/api/getlist http://xxx:8080/getlist
The above article solves the problem of the local proxytable invalid error 404 in VueCil agent. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.