CLI and vite realize cross domain through proxy

One 、 Basic concepts

        url Components ： agreement :// domain name : port , When the target interface communicates with the current browser , As long as any one of the three changes , We all call it cross domain .

Two 、 problem

        Use vue Project time , We use it most of the time axios, and axios We all configure baseUrl, Then the following error message appears ！!  This is caused by the browser's homology strategy Cross-domain problem , The same origin policy will prevent a domain from javascript The script interacts with the contents of another domain .

3、 ... and 、 The scaffold cli solve

        vue Project address :   http://localhost:8080

         Back end interface :         http://localhost:8888/test

        (1) Create a new... Under the root directory vue.config.js file , And configure the following contents , When modifying the configuration file, remember to restart the project

module.exports = {
    devServer: {
        proxy: {
            '/api': {    // As long as there is api Just go here 
                target: 'http://localhost:8888/',    // Destination address 
                changeOrigin: true,    // Whether to enable cross domain 
                pathRewrite: {
                    '^/api': ''    // take api Replace with ''
                }
            }
        }
    }
} 

           (2)axios Secondary packaging

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 3000
})

export default request

             (3) stay App.vue Use in

<template>
  <div id="app">

  </div>
</template>

<script>
import request from './request/index.js'
export default {
  name: 'App',
  created() {
    this.getData()
  },
  methods: {
    // Get back-end data 
    async getData() {
      let res = await request({
        url: '/test',
        method: 'GET',
      })
      console.log('res:', res)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Four 、vite solve

vue Project address ：        http://localhost:5173

Back end interface :         http://localhost:8888/test

(1) Find... In the root directory vite.config.js file , And write the relevant configuration , Remember to restart the project

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {    // As long as there is api Just go here 
        target: 'http://localhost:8888/',    // Destination address 
        changeOrigin: true,    // Whether to enable cross domain 
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

  (2)axios Secondary packaging

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 3000
})

export default request

     (3) stay App.vue Use in , In fact, it is vue3 The grammar of

<template>
  <div></div>
</template>
<script setup>
import request from './request';
import { onMounted } from 'vue'
// get data 
const getData = async () => {
  let res = await request({
    url: '/test',
    method: 'GET'
  })
  console.log('res:', res)
}
onMounted(() => {
  getData()
})
</script>
<style scoped>
</style>