开发模式下的 API 请求不同于生产模式下的 API 请求答案

【问题标题】：API request different in dev mode than in prod mode开发模式下的 API 请求不同于生产模式下的 API 请求
【发布时间】：2020-06-09 20:24:08
【问题描述】：

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

似乎构建过程正在以不同的方式进行编译。

我的 ApiService.js 代码 sn-p:

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)
}

This is the diff of the two API calls

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

Access to XMLHttpRequest at 'https://my-api.azurewebsites.net/login' from origin 'http://www.mysite.ch' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

【问题讨论】：

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

标签： javascript vue.js axios cross-domain

【解决方案1】：

我怀疑它在本地工作，因为您的本地域正在传递 CORS 请求。最终这只是一个 CORS 配置问题。您的生产域尚未列入白名单。我不确定您的后端是什么或 Azure 如何影响它，但您需要将您的生产域列入白名单以供 API 使用。

这是在 Express 中设置 CORS 策略的示例：https://flaviocopes.com/express-cors/

请确保您不允许所有来源，因为这会带来安全风险。

【讨论】：

感谢所有贡献者。我已将客户端的 URL 添加到服务器的白名单中。从那时起，它似乎奏效了。但是，奇怪的是我之前有一个 *，它也应该包括我的客户端 URL。所以，我不能 100% 确定最终的根本原因是什么。 * 现在已删除。无论如何，您的支持非常有帮助。