axios跨域问题解决

在前端使用axios向后端发送请求时，经常会看到包含CORS policy的报错，是因为浏览器的同源策略。

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

解决方案：

常见方案为配置代理服务器。在vue.config.js中插入下面代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8888',//改为后端的地址端口
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }
}

如果是vue3 vite，则在里面插入：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
})

 随后在request.js 中将baseURL改为 ‘/api’

这样，前端请求地址需要以/api开头的请求 e: /api/user/getUser，会被识别并代理（中间的/api会被替换为空字符串），从而解决问题。