使用 Axios 和 VueX 的 Vue 应用程序在 localhost:3000 上被 CORS 阻止？答案

【问题标题】：Vue app using Axios and VueX blocked by CORS on localhost:3000?使用 Axios 和 VueX 的 Vue 应用程序在 localhost:3000 上被 CORS 阻止？
【发布时间】：2021-12-05 08:47:59
【问题描述】：

自从切换到从 VueX 存储 (db.json) 文件而不是 json 文件的在线版本加载数据后，我在预览我的应用程序时遇到问题。

在 Chrome 上出现错误：

GET http://localhost:3000/events net::ERR_CONNECTION_REFUSED

在 Firefox 上出现错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/events. (Reason: CORS request did not succeed)

我尝试了一些不同的方法，例如添加 Access-Control 标头，将凭据设置为 true，并在 127.0.0.1 地址而不是 localhost 上尝试此操作，但仍然没有任何运气。

我执行 Axios 调用的 EventService.js 文件是：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, PUT, POST',
    'Access-Control-Allow-Headers': 'Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With'
  }
})

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

当无法建立连接时，它只是默认返回我的 NetworkError 组件。

【问题讨论】：

这些访问控制标头必须与响应一起由服务器发送，而不是由客户端发送。
抱歉我没关注？原始代码（来自 VueMastery）不包含任何标题并且可以正常工作，所以我不完全确定在运行 npm run serve 时如何解决 CORS 问题
您的客户端应用程序很好，不需要这些标头。您需要修改的是您的 server（在 localhost:3000 上运行），以便它与每个 response 一起发送这些标头。
问题中的错误消息表明请求甚至没有到达服务器——它永远不会到达浏览器接收响应的地步。这就是 ERR_CONNECTION_REFUSED 和 “CORS 请求不成功” 的意思。见developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…。如果您尝试在任何浏览器中直接打开localhost:3000，会发生什么情况？
感谢@sideshowbarker，我收到消息“无法连接”，这可能解释了这一点。我之前确实进入了我的 Windows 防火墙设置以设置入站和出站规则 (TSP) 以允许端口：3000，但看起来这不起作用。你对打开它有什么建议吗？

标签： vue.js axios localhost vuex connection-refused

【解决方案1】：

在此处发布答案以免其他人头疼。

看来我需要在项目的根目录中设置一个单独的 vue.config.js 文件，其中包含：

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000'
    }
}

然后我必须更改通过 EventService.js 文件（链接到 VueX 存储和 db.json 的文件）执行的调用，以从 baseURL 中删除 localhost:3000，如下所示：

import axios from 'axios'

const apiClient = axios.create({
 // baseURL: 'http://localhost:3000', // Not required due to proxy
  
  withCredentials: false,
  headers: {
    Accept: 'application/json'
  }
})

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

【讨论】：