使用Axios和VueX的Vue应用在localhost:3000出现CORS跨域问题如何解决？

• net::ERR_CONNECTION_REFUSED报错的本质是你本地3000端口没有运行对应的后端/静态资源服务：你已经将数据源切换为Vuex关联的本地db.json文件，但Axios配置仍然在请求独立的3000端口服务，该服务未启动自然连接失败，Firefox的CORS报错是连接失败衍生的次级错误，不是核心问题。
• 你把Access-Control-*系列CORS头配置在了前端Axios的请求头里，这是完全错误的用法：CORS头是服务端返回响应时携带的响应头，前端请求加这些头完全不会生效，甚至可能触发额外的预检请求报错。

步骤1：确认db.json的托管方式 #

你使用的db.json通常搭配json-server做模拟接口，首先要启动对应服务：
全局安装json-server后直接执行：json-server --watch db.json --port 3000
如果你是把db.json放在Vue项目的public目录下作为静态文件读取，不需要启动json-server，直接修改Axios的baseURL为本地静态文件路径即可。

步骤2：修正Axios的错误配置 #

删掉EventService.js里所有的Access-Control-*请求头配置，修正后的代码如下：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  getEvents() {
    return apiClient.get('/events')
  },
  getEvent(id) {
    return apiClient.get('/events/' + id)
  },
  postEvent(event) { 
    return apiClient.post('/events', event)
  }
}

步骤3：适配你当前的数据来源逻辑 #

如果你已经把数据全量存在Vuex中，不需要再调用3000端口的接口，直接把Axios请求替换为Vuex的状态读取逻辑即可：

• 读取事件列表直接调用对应的Vuex getter或者直接访问this.$store.state.events
• 新增/修改事件直接调用Vuex的mutation/action操作本地数据，不需要发送HTTP请求

额外可选：开发环境跨域兜底 #

如果你后续需要调用不同端口的后端接口，直接在Vue项目的vue.config.js里配置代理即可，不需要手动修改CORS头：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

配置完成后把Axios的baseURL改为/api，开发环境会自动代理转发请求，不会触发跨域问题。

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