Webpack front and rear end separation Development Interface Debug solution, Proxytable Solution

If you have a separate backend Development Server API, and you want to send API requests under the same domain name, it can be useful to proxy some URLs.

The dev-server uses a very powerful Http-proxy-middleware package. For more advanced usage, consult its documentation.

In the localhost:3000 case of backend services, you can enable the proxy:

Proxy: {  "/api""http://localhost:3000"} 

The request /api/users is now proxied to the request http://localhost:3000/api/users .

If you do not want to always pass /api , you need to rewrite the path:

Proxy: {  "/api": {    "http://localhost:3000 " ,    pathrewrite: {"^/api""" "//  The new path that can be overridden later makes no changes to the general  

By default, a back-end server running on HTTPS that uses an invalid certificate is not accepted. If you want to accept, modify the configuration as follows:

Proxy: {  "/api": {    "https:// other-server.example.com",    false  

Sometimes you don't want to proxy all the requests. You can bypass the proxy based on the return value of a function.

In the function you can access the request body, the response body, and the proxy option. A return false or path must be returned to bypass the proxy request.

For example, for a browser request, you want to provide an HTML page, but keep the proxy for the API request. You can do this:

Proxy: {"/api": {target:"http://localhost:3000", Bypass:function (req, res, proxyoptions) {if(Req.headers.accept.indexOf ("HTML") !== -1) {Console.log ("skipping proxy for browser request."); return "/index.html"; }    }  }} 

If you are using the VUE-CLI development He also provided the proxytable and the above operation as

Here's my frustration makeover.

ConstTargetpath='http://172.16.3.48:8080';//the address of the server can be www.xxx.comConstpathx='/*';//if the interface address is fwone-central/orderinfo/* after packaging pathx= '/* ' if/orderinfo/* then pathx= 'varKeysarr=[Pathx+'/orderinfo/*', Pathx+'/company/*', Pathx+'/person/*', Pathx+'/person/*/*', Pathx+'/oncall/*', Pathx+'/tr/*', Pathx+'/calldetail/*', Pathx+'/customernotification/*', Pathx+'/customernotification/*/*/*', Pathx+'/sys/*', Pathx+'/sys/*/*', Pathx+'/invoice/*', Pathx+'/contractservicedetails/*', Pathx+'/customercomplain/*', Pathx+'/callreminder/*',] for(Let i=0; i<keysarr.length;i++) {Config.dev.proxytable[keysarr[i]]={target:targetpath, secure:false, Changeorigin:true,  }} Console.info (Object.keys (config.dev.proxyTable)) Module.exports= Config

Let me first say why I do this, we have developed a direct conventional way of writing without problems, but if you deploy to a test server, a Tomcat runs multiple projects our backend uses folders to differentiate items, but this distinction seems to affect the interface path, which means

The original is '/' now becomes '/fwone-central '

I thought it was a good thing to do at first. I changed target directly to ' http://172.16.3.48:8080/fwone-central ' interface 404

And then

'/fwone-central/orderinfo/* ': {        target:' http://172.16.3.48:8080 ',        false,         true ,      }, // This is OK, actually, I think the requested address is the same.

So I do not have to do the above changes may you do not know what I said, because you have not met, or you will never meet, if you know the reason whether the front end or the back end can be more elegant solution of the welcome message told me, greatly appreciated!

Of course, there's a hole in it. When you ask for data, it's not a problem, but the path changes after you deploy, and the request path is invalid.

Axios ({            ' get ',            URL:'/orderinfo/count ' ,            params: {orderstateids: [1, 2, 3, 4, 5 , 6, 7, 8]}          ). Then (function  (r) {            if (R.data.code = = 0) {              
    //...             }          });        }). Catch (function  (error) {          console.error (error);        })

The solution is a long-circulated absolute path and a common path

Window.localpath= ' Http://localhost:8087/fwone-central '//He can be defined on the homepage at any time along the project path modificationAxios ({method:' Get ', Url:localpath+ '/orderinfo/count ', params: {orderstateids: [1, 2, 3, 4, 5, 6, 7, 8]}). Then (function(r) {if(R.data.code = = 0) {             //...            }          }); CB ()}).Catch(function(Error) {Console.error (error); })

And the last thing to note is that the path changes and the static resource path after the package changes, so in Vue-cli config.js index.js

Build: {       // This is to package a static resource into the specified folder    //  This is the path to the static resource       }, 

I personally think the backend of this modification makes the front end of a lot of places to modify the configuration, not a very good way to maintain, if you have a better solution (both front and back), welcome message to tell me, greatly appreciated!

Webpack Development Interface Debug Solution, Proxytable solution