Javascript 开发模式下的API请求与生产模式下的不同

我有一个vue.js cli客户端，它使用驻留在Azure上的API（我开发了客户端和API）。 当我在开发模式下运行客户端（npm run serve）时，我的API正确响应，状态代码为200。但是，当我构建生产版本（npm run build）并在本地运行dist版本（serve-s dist）时，我的API调用被拒绝（400个错误请求）

似乎构建过程的编译方式有所不同

My ApiService.js代码段：

import axios from 'axios'

const apiURL = 'https://my-api.azurewebsites.net/' 

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

userLogin(credentials) {
    return apiClient.post('/login', credentials)
}

在生产模式下调用API时，浏览器会报告cors问题：

访问位于的XMLHttpRequest'https://my-api.azurewebsites.net/login“起源”http://www.mysite.ch'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。

---

我花了很多时间在网上寻找解决方案，但没有成功。欢迎任何提示。

我怀疑它在本地工作，因为您的本地域正在通过CORS请求。最终这只是一个CORS配置问题。您的生产域尚未被列入白名单。我不确定你的后端是什么，或者Azure对它有何影响，但你需要将你的生产域列入API消费的白名单

这是在Express中设置CORS策略的示例：

---

只需确保您不允许所有来源，因为这是一种安全风险。

似乎与您使用

/login

的路由有关，错误代码为400，您是否使用vue SPA+vue路由器历史记录模式，而在生产构建后不使用任何预渲染/SSR？另一个解决方法是Azure站点中的重定向规则。请使用Postman测试API调用。目前，您正试图同时测试两端，这总是有问题的，因为这使得很难将问题隔离到一端或另一端。服务器可以出于各种原因返回HTTP 400，例如未启用功能或数据格式错误。如果你能让你的API调用与Postman一起工作，那么你将在一个更好的地方尝试你的客户端应用。嗨@SCKim，是的，这是一个vue SPA，路由器设置为历史模式。我将研究您关于Azure中预渲染/SSR和重定向的提示。谢谢。@RegEdit，API使用Postman工作，如果我使用npm run serve在上运行它，也可以使用它。当我构建dist文件并运行这个（service-s dist）时，它没有运行。因此，我假设根本原因在客户端。带有diff的屏幕截图（附在上面）表明客户端以不同的方式发送API调用。@Phil，这是

vue cli服务

。我对整个部署过程不是很有经验。这可能是一个基本问题，但我不知道；-）感谢所有的贡献者。我已将客户端的URL添加到服务器的白名单中。从那时起，它似乎起了作用。然而，奇怪的是，我以前有一个*也应该包括我的客户端URL。因此，我不能100%确定最终的根本原因是什么。*现在已删除。不管怎样，你的支持很有帮助。