1. Cross-domain issues

Cross-domain issues: When a browser requests another resource from one webpage, any difference in domain name, port, or protocol is cross-domain.

2. Common solutions across domains

jsonp: Using the cross-domain feature of the script tag, you can directly call back the function of the current script in the cross-domain script.
cors: The server sets the Access-Control-Allow-Origin value in the HTTP response header to remove cross-domain restrictions.
Node agent
nginx reverse proxy

Configuring proxy in Vue is to use Node proxy. Let’s talk about how to configure proxy in Vite.

3. How does the agent solve the cross-domain problem

insert image description here
The proxy configured on the front end converts the address to the actual back-end interface according to specific rules, and requests the back-end interface.

4. Configure proxy in Vite

4.1.vite.config.ts configuration

If I now want to request an interface http://www.test.com/login from the local backend, how should I configure the proxy server?
Refer to Vite official website: server.proxy
insert image description here
is configured as follows in vite.config.ts

server: {
    
    
  // http://localhost:5173/api/login -> http://www.test.com/login
  proxy: {
    
    
    //api是自行设置的请求前缀，任何请求路径以/api开头的请求将被代理到对应的target目标
    '/api': {
    
    
      target: http://www.test.com, //需要代理的域名，目标域名
      changeOrigin: true, //需要代理跨域
      rewrite: (path) => path.replace(/^\/api/, ''), //路径重写，把'/api'替换为''
    },
  },
},

After the proxy is configured, the current address http://localhost:5173/api/login will be proxied to the address http://www.test.com/api/login in the target, and the path will be rewritten to finally proxy to http: //www.test.com/login, to solve cross-domain problems.

4.2. Using environment variables in configuration

Usually a project will have different environments during the development process, you can create a corresponding .env file and configure the required environment variables in it.
For example, .env.development represents the development mode file

NODE_ENV = 'development'
VITE_APP_TITLE = 'dev-project'
VITE_APP_BASE_API = '/api'
VITE_SERVE = 'http://www.test.com'

.env.production is used to save various environment variables in production mode

NODE_ENV = 'production'
VITE_APP_TITLE = 'pro-project'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://www.test.com'

By default, the development server (dev command) runs in development mode, and the build command runs in production mode.

Get the environment variables in the .env file in Vite

You need to use the loadEnv method to load the corresponding .env file in the current mode and obtain the corresponding environment variables in the file. Refer to Vite official website:
insert image description here

process.cwd() is the root directory of the project (where the index.html file is located), configure .env.development and .env.production in the root directory of the project, and then load all .env in the root directory through loadEnv file, get the environment variable of the current mode through mode. The corresponding environment variables in various modes are stored in env.
So the configuration agent can be rewritten as:

server: {
    
    
  proxy: {
    
    
    [env.VITE_APP_BASE_API]: {
    
    
      target: env.VITE_SERVE, 
      changeOrigin: true, 
      rewrite: (path) => path.replace(/^\/api/, ''), 
    },
  },
},

Vite configuration proxy Proxy