Vue proxyTable Configuration Agent Solves Cross-domain Problem in Development Environment

Time:2019-9-25

vue + webpackBuild project to solve cross-domain browser problem

Browser homology policy is a protection mechanism for browsers.

When browsers send cross-domain Ajax requests, it is not that requests cannot be sent out, requests can be sent out, and the background can return response data after receiving requests, but browsers do not receive response data from these different sources.

Principles of agency:

  • Proxy location: web server
  • The agent intercepts the Ajax request sent by the browser, forwards it to the target background server, and then gets the response and sends it back to the browser. Because the location of the proxy is within the domain limited by the web server, that is, the browser’s homology policy, the browser will not regard the response as a dangerous resource after receiving it, and will normally parse and execute it.

stayconfig/index.jsMiddle configurationproxyTableAgent, as shown in the following figure:

Vue proxyTable Configuration Agent Solves Cross-domain Problem in Development Environment

ProxyTable: {// Configuration Agent
  '/api': {// Matches all request paths starting with'/api'
    Target:'http://localhost:4000', //proxy target's underlying path
    Change Origin: true, // supports cross-domain
    PathRewrite: {// Rewrite Path: Remove the'/ api'at the beginning of the path
      '^/api': ''
    }
  }
},

This method can solve the cross-domain problems in the development environment, and the production environment needs to be solved with the back-end.