Vue中使用fetch/axios.get请求接口报CORS跨域错误如何解决

• 赋值逻辑错误：axios.get()和fetch返回的都是Promise异步对象，不是接口返回的直接数据，直接赋值给this.roomUserCount拿到的是Promise实例，并非预期的接口返回数据。
• CORS跨域限制：这是浏览器的同源安全策略，仅限制浏览器端的异步请求，curl、Postman等工具类请求不受该规则约束，所以用curl可以正常拿到数据。报错提示预检请求不通过，说明请求触发了非简单请求的预检逻辑，后端没有返回对应的CORS响应头，被浏览器拦截。

1. 修正异步赋值逻辑 #

axios版本 #

// 方法定义不变
getRoomUserCount: function () {
  return axios.get('URL', {
    responseType: "json",
  });
},
// 调用处加await等待异步返回
mounted: async function () {
  const res = await this.getRoomUserCount()
  this.roomUserCount = res.data
},

fetch版本 #

// 封装fetch请求方法
getRoomUserCount: async function () {
  const res = await fetch('URL', {
    method: 'GET',
    headers: {
      'Accept': 'application/json'
    }
  })
  return res.json()
},
// 调用赋值
mounted: async function () {
  const data = await this.getRoomUserCount()
  this.roomUserCount = data
},

2. 解决CORS跨域问题 #

根据使用场景选择对应方案：

本地开发场景 #

使用Vue构建工具自带的代理转发功能绕过跨域：

Vue-cli（Vue2）配置

在项目根目录的vue.config.js中添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      // 可自定义匹配前缀，示例为匹配所有以/api开头的请求
      '/api': {
        target: '接口服务实际地址前缀（如https://example.com）',
        changeOrigin: true,
        // 若接口无/api前缀，可通过pathRewrite移除
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Vite（Vue3）配置

在项目根目录的vite.config.js中添加如下配置：

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: '接口服务实际地址前缀',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

配置完成后，将请求URL替换为/api/接口实际路径即可，开发环境会自动转发请求，不会触发跨域。

生产上线场景 #

两种可选方案，均适配axios和fetch：

• 后端配置CORS响应头：在接口服务的响应头中添加Access-Control-Allow-Origin字段，允许你的前端域名访问；若存在预检请求，还需配置允许OPTIONS请求方法、允许自定义请求头，这是最标准的跨域解决方案。
• 同域名转发部署：将前端页面和接口服务部署在同一个域名下，用Nginx做路径转发，比如前端访问地址为https://xxx.com，接口统一用https://xxx.com/api/前缀，Nginx将/api开头的请求转发到后端接口服务，可完全规避跨域问题。

内容的提问来源于stack exchange，提问作者ArcticMediaRyan