Detailed solution to cross-domain vue proxy mode

What is cross-domain

Simply put, you use resources from another place in one place and are blocked by the browser and will not be used! Of course, it has its own reason to block it: for safety (╬▔blue▔)╯.

Solve cross-domain

I developed it with vue, so I will explain the solution to the cross-domain of the vue proxy model.

1. Write it like this:

let devProxy = {
  //Get IP information  '/getIpMsg': {
    target: "/",//Real address    ws: true,
    changeOrigin: true,
    pathRewrite: {
      '/getIpMsg': ''
    },
  },
};
const { defineConfig } = require('@vue/cli-service')
 = defineConfig({
  transpileDependencies: true,
  publicPath: .NODE_ENV === "production" ? "./" : "/",
  devServer: {
    port: 8080,//port    open: false,//Will the project open automatically in the browser after starting    proxy: devProxy//Proxy Server  },
})

target is the real address you need to proxy getIpMsg, you can customize it.

2. Create one (I am from ts, you can also js):

import axios from "axios";
//Create a requestfunction createServe(config: any) {
    let serve = ({
        timeout: 5000 //time out    });
    //Request an interceptor    (
        config =&gt; {
            return config;
        },
        error =&gt; {
            return (error)
        }
    )
    //Response Interceptor    (
        response =&gt; {
            return response;
        },
        error =&gt; {
            return (error)
        }
    )
    return serve(config);
}
 
export default createServe;

3. Create one:

import createServe from "./http"
 
//Get IP informationexport function getIpMsg(params = {}) {
    return createServe({
        method: "GET",
        url: '/getIpMsg',
        params
    })
}

4. Use this way:

import { getIpMsg } from "@/api/request";
 
function test(){
    getIpMsg()
    .then(res => {
        (res);
    })
}

This is the article about the detailed explanation of the cross-domain solution of vue proxy mode. For more related content related to cross-domain solution of vue proxy mode, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!