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

Question

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

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

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

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.

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

Answer 1

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

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

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

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

API request different in dev mode than in prod mode

javascript

cross-domain

vue.js

axios