Vue3 vite configures cross-domain and does not take effect

1. Add configuration in vite.config

server: {
    host: "0.0.0.0",
    cors: true,
    port: 8991,
    open: false, //自动打开
    proxy: {
      // 这里的ccc可乱写, 是拼接在url后面的地址 如果接口中没有统一的后缀可自定义
      // 如果有统一后缀, 如api, 直接写api即可, 也不用rewrite了
      "^/ccc": {
        target: "http://116.62.200.158", // 真实接口地址, 后端给的基地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/ccc/, ""), // 将ccc替换为空
      },
    },
  },

2. Configure the base address in the development environment in .env.development (create manually without this folder)

VITE_BASEURL='/ccc'

3. Configure the base address of axios

const instancs = axios.create({
  baseURL: import.meta.env.VITE_BASEURL,
});

at last:

        I made a mistake before, which caused me to fail for a long time... After configuring vite.config, the /ccc suffix is ​​added by myself if the interface does not have it, so I have to add it manually... 

        This is a problem with our company's backend. Most of the backends will have a unified suffix, such as api, but my backend does not follow such a standard, and I compare myself... If it is configured like this, it will not be able to produce I wrote it like this, and now I can run it normally in the development environment with this configuration

Guess you like

Origin blog.csdn.net/Motion_zq/article/details/128904854