Of Stack

Solve the problem of VueCil proxy local proxytable invalid error 404

  • 2021-09-16 05:56:10
  • OfStack

Preface

Because the project encountered this bug: Vue cil2 configuration agent proxytable successful, but invalid error 404, in the back-end and agent configuration is correct, or report 404, has been solved first, special records, hoping to help others;

Text

1. Why use proxies?

The role of proxy is to forward the request proxy to the middleware of other servers;

For example, our current host is http://localhost: 8080/, and now we have a requirement. If we request/api, what if we don't want 3000 to handle this request, but want another server https://www. example. org/api to handle this request?

At this time, we must use agents to solve it!

2. How to use multiple proxies in vue? 


module.exports = {
dev: {
 proxyTable: {
  //  No. 1 1 Agents 
  '/api-test': { 
  target: 'https://www.example.org:', ///  Target server  host
  ws:true, // Enable or not websocket
  secure: true, //  If it is https Interface, you need to configure this parameter 
  changeOrigin: true, // //  Default false Whether you need to change the original host header to the target URL Is it cross-domain 
  pathRewrite: {
   '^/api-test/old': '/api-test/new' //  Rewrite the request, for example, our source accesses api-test/old The request is resolved to /api-test/new
  },
  // No. 1 2 Agents 
  '/api-else': { 
  target: 'https://197.32.22.33:8090', 
  ws:true, // Enable or not websocket
  secure: true, 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-else': '' // Default writing, if you don't write pathRewrite Is empty by default; 
  },
  // No. 1 3 Agents 
  '/api-three': { 
  target: 'https://197.32.22.33:9090', 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-three': '/api-three' // Rewrite the request so that the local request does not have two /api-three
  },
  }
 },

The above code can configure the agent in the vue-cil project;

There are many proxy parameters, you can see the details: Options in http-proxy-middleware, add yourself;

Then let's analyze 1 why: Vue proxy local proxytable successful, but invalid error 404 several cases

3. Cause analysis of bug

1. Test whether the interface is accessed normally in the browser or postman; (Most important!! Otherwise, it will be useless to change for half a day)

Then what 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/getsomething.json, and then proceed to the next step after the browser directly inputs the return value and tests it correctly;

2. Make sure you write it exactly right!

2.1 (Refer to writing 2) At this time, the interface address you request locally will become: http://localhost: 8080/api-else/api-else/getsomething. json is normal!

Are you curious why there are two/api-else, because locally: http://localhost: 8080/api-else is equivalent to: https://197.32.22.33: 8090, which is normal!

2.2 (Ref. 3)

If there is still an error in the above writing, you can refer to the route in writing 3 to change the test. Example: The interface you want to access is https://197.32.22.33: 9090/api-three/getThreething.json, and after local configuration: http://localhost: 8080/api-three/getThreething. json.

Say one more sentence, why mention the third writing method?

This is suitable for multi-background projects with front-end separation, The package name of the background project is: api-three, which is written in the second place. After packaging, the deployment of the production environment will have the problem of request (the pit that our own project stepped on, occasionally), so it is stipulated that the agent and the background package name are unified 1, and can not be directly written in the request, but after configuring the agent, rewrite the agent's request and point to the package name;

3. After modifying index. js of config, please promise me to restart the project npm run dev;

4. It's also the reason for my bug this time (serious face, this is super subtle!)

In the case of configuring multiple agents, the agent names cannot be the same or overlap!

Error demonstration (second agent failed): 


 proxyTable: {
  //  No. 1 1 Agents 
  '/api-test': { 
  target: 'https://www.example.org:', ///  Target server  host
  },
  // No. 1 2 Agents 
  '/api-testAAA': { 
  target: 'https://197.32.22.33:8090', 
}

This mistake is really difficult to find, and it is understood only after checking the source code;

Say 1 here, why do you write 404 like this!

The proxy of vue is implemented based on http-proxy-middleware, and http-proxy-middleware has the following method for which proxy name to take: 


function matchSingleStringPath(context, uri) {
 const pathname = getUrlPathName(uri);
 return pathname.indexOf(context) === 0;
}

Yes! He used indexOf () = = = 0 to judge! ! ! So if your multiple proxies overlap/api-testAAA and/api-test, they will all return true!

But/api-test can be judged faster, so/api-testAAA will fail! ! !

Conclusion

Vue cil version number is 2, the old version of the project; After that, the learning process of the new version vue cil 3 + will be recorded;

Ok, after spitting, I hope everyone doesn't step on the pit ~

Supplementary knowledge: proxyTable proxy issues for the production environment of Vue

1. Find the proxyTable configuration entry in the config/index. js configuration file 


dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': { //3
  target: 'http://xxx:8080',
  changeOrigin: true,
// secure:false  Agent 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 api, you need api, which means that if you have api, you will use api first, so as to prevent api at 3 places from being considered by the system. If there is no api in the interface, you don't need it, that is, you can omit it. Summary:

Configuration number 1 beginning with "/api" for interface, not required if not

3. If you configure multiple agents 


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 is http://xxx: 8081/api/1/getlist

/api/getlist http://xxx: 8080/api/getlist

Case 2

/api/1/getlist http://xxx: 8081/getlist

/api/getlist http://xxx: 8080/getlist

Related articles: