The practical battle of cross-domain configuration of vue3+vite project

I feel a bit complicated to write this article, after all, I have been stuck for two whole days because of a huge and boring bug...

I won’t say much nonsense, I will start with the topic. I hope everyone can correct their buggggg! ! !

Configuration

Note: Because I use itviteThe created one is not vue-cli. I searched many tutorials at that time and taught me to create a new one, but found that it was not effective at all. Therefore, if the project created using vite is inThe following code is configured:

Taking the epidemic data API I want to access as an example, the original API address: /testaxios/newsqa/v1/automation/modules/list?modules=FAutoCountryConfirmAdd,WomWorld,WomAboard

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/testaxios': {
        target: '/',
        // target is the target address you want to access, which can be the basic address, which is convenient for calling data in other API ports of this website        ws: true,
        changeOrigin: true,
        rewrite: (path) =&gt; (/^\/testaxios/, ''),
        // Remember to add rewrite      },
    },
  },
})

document

When I write the code, I encapsulate the API-related calling functions in a file, in the API/file, and then I can directly call the functions when I use them in other places.

In addition, I also encapsulated the request of axios. The encapsulation code of copy can also be directly introduced to axios. If necessary, just take it away.

api /

import axios from "../utils/requst"     
// import axios from "axios"
const api = {
    // Epidemic data    getNcov(){
        return ("testaxios/newsqa/v1/automation/modules/list?modules=FAutoCountryConfirmAdd,WomWorld,WomAboard")
    },
    // City data    getNcovCity(){
        return ("testaxios/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh5Shelf")
    },
    getNcovCity2(){
        return ("newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare")
    }
}
export default api;

Note: Just add the prefix testaxios you configured above (no use / in front), and the second half of the original address will be Oak!

utils /

import axios from "axios"
import qs from "querystring"
/**
  * Method of handling failure
  * status: status code
  * info:Information
  */
const errorHandle = (status,info) =&gt;{
    switch(status){
        case 400:
            ("The semantics are incorrect, and the current request cannot be understood by the server. The client should not submit this request repeatedly unless modified.")
            break;
        case 401:
            // token:Token            ("Server authentication failed")
            break;
        case 403:
            ("The server has understood the request, but refused to execute it");
            break;
        case 404:
            ("Please check the network request address")
            break;
        case 500:
            ("The server encountered an unexpected situation, which caused it to fail to complete the processing of the request. Generally speaking, this problem occurs when the server's program code errors.")
            break;
        case 502:
            ("When a server working as a gateway or agent attempts to execute a request, an invalid response is received from the upstream server.")
            break;
        default:
            (info)
            break;
    }
}
/**
  * Create an axios instance object
  */
const instance = ({
    // Public configuration    // baseURL:"",
    timeout:8000
})
/**
  * Handle interceptors
  */
 /**
   * Request to intercept
   */
(
    config =&gt; {
        if( === "post"){
             = ()
        }
        return config
    },
    error =&gt; (error)
)
/**
  * Response interception
  */
(
    // Completed    response =&gt;  === 200 ? (response) : (response),
    error =&gt; {
        const { response } = error;
        errorHandle(,);
    }
)
export default instance

3. Call API-related functions

I called it inside, and I can directly call the function after importing the API file.

mounted(){
      ().then(res=>{
        ()
      }).catch((error)=>{(error)});
    }

None! ! ! ! ! ! ! ! ! ! Rush ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh ! ! ! ! ! ! ! !

Summarize

This is the article about the actual combat of cross-domain configuration of vue3+vite project. For more related content related to cross-domain configuration of vue3+vite, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!