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

Question

我有一个vue.js cli客户端，该客户端使用驻留在Azure上的API（我已经开发了客户端和API）。当我在开发模式下运行客户端（npm run serve）时，我的API使用状态代码200正确响应。但是，当我构建生产版本（npm run 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/

请确保您不允许所有来源，因为这是安全隐患。