Cross-domain issues often occur when a VUE single-page application project is developed and you cannot avoid having to request the back end. There are two common solutions

  1. Backend Settings allow cross-domain access
  2. The front end accesses the back end through a proxy

Let’s just talk about how to configure Vue-CLI proxy access:

Vue – cli agent

Configure the backend of the three requests as follows:

  • requesthttp://localhost:4201/adminapi/*Will proxy the requesthttp://localhost:8180/*
  • requesthttp://localhost:4201/portalapi/*Will proxy the requesthttp://localhost:8185/*
  • requesthttp://localhost:4201/securityapi/*Will proxy the requesthttp://localhost:8089/*

Because Vue-CLI is Webpack-based, Webpack’s devServer options are configurable

module.exports = { // ... devServer: { port: 4201, proxy: { '/adminapi': { target: 'http://localhost:8180', ws: true, changeOrigin: true, pathRewrite: { '^/adminapi': '' } }, '/portalapi/': { target: 'http://localhost:8185/', ws: true, changeOrigin: true, pathRewrite: { '^/portalapi': '' } }, '/securityapi/': { target: 'http://localhost:8089/', ws: true, changeOrigin: true, pathRewrite: { '^/securityapi': '' } } }, disableHostCheck: True, // This is because the new version of webpack-dev-server checks the hostname by default for security reasons, and breaks access if the hostname is not in the configuration. } / /... }

NodeJS does intermediate line routing and forwarding

Requests can be routed and forwarded using NodeJS and Framework Express. You can even eliminate the need to configure a reverse proxy with NGINX in a production environment. Each solution has its own advantages and disadvantages. The selection of technical architecture should be tailored to your own project environment, and it is best to suit your own team.

Backend cross-domain access

Backend cross-domain access Settings are also relatively simple, and the Settings for Java, PHP, and Python Go are similar for different languages. There is a lot of data to query, but in a production environment, for safety reasons, it is recommended not to set cross-domain access, or to restrict cross-domain IP access