Vue 3.0 + vite + axios+PHP跨域问题的解决办法

最后一个Web项目，采用前后端分离。

前端：Vue 3.0 + vite+element plus

后端：PHP

运行时前端和后端是两个程序，前端需要时才向后端请求数据。由于是两个程序，这就会出现跨域问题。

比如前端某个地方需要请求的接口如下所示，这时就会报错。

axios.post('http://localhost/cesiumphp/index.php?action=add', jsonObject)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.error(error);
    });
        
        console.log(jsonString);
      }
    }

解决办法：

1.将http://localhost:80（注端口为80时可以省略）替换为api

axios.post('api/cesiumphp/index.php?action=add', jsonObject)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.error(error);
    });
        
        console.log(jsonString);
      }
    }

2.在vite.config.ts中增加代理配置，将http://localhost:80

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:80',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})
 

现在不报错了。