[vite+vue3] vite proxy | Same Origin Policy | Access to XMLHttpRequest at | CORS || Access-Control-Allow-Origin

Problem Description

1. vue3+vite front-end separation project
2. The back-end interface url (http://127.0.0.1:3000) and the front-end url (http://192.168.124.7:5173) are inconsistent, and the front-end cannot request data from the back-end, as shown below↓
   

Solution | Configure vite cross-domain

reference

focus:

1. houD- Unified request parameters for the backend url
2. target- backend url

server: {
    
     
  proxy: {
    
    
    '/houD': {
    
    
      target: 'houDUrl/houD', 
      rewrite: (path) => path.replace(/^\/houD/, '') // 不可省略 
    }
  }
}

---

example

example reference

• For example, the backend uniform request parameter is/api
• When the url /apiis , it is automatically converted tohttp://127.0.0.1:3000/api

export default defineConfig(
{
    
    
  base: "./",
  server: {
    
     
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://127.0.0.1:3000/api', 
        rewrite: (path) => path.replace(/^\/api/, '') // 不可省略 
      }
    }
  },
}
) 

use reference

• directly when using/api/xxxx
• don't write allhttp://127.0.0.1:3000/api/login?u=1&p=2

axios.post('/api/login?u=1&p=2'))