由于不允许的预检标头，Vue.js 前端与 Flask 后端 CORS 问题交互

Posted 2023-02-22

【中文标题】由于不允许的预检标头，Vue.js 前端与 Flask 后端 CORS 问题交互

【英文标题】：Vue.js frontend interacting with Flask backend CORS issues due to not allowed preflight headers

【发布时间】：2018-12-05 16:12:09

【问题描述】：

我在 Chrome 浏览器中遇到以下错误消息：

无法加载http://localhost:5000/my_endpoint：请求头字段 Access-Control-Allow-Origin 不允许 预检响应中的 Access-Control-Allow-Headers。

浏览器正在从带有 webpack 等的 Vue.js 前端应用程序加载网页，并使用 vue-resource 向 REST 后端执行 HTTP 请求。

URL http://localhost:5000/my_endpoint 是一个 HTTP GET/POST 端点，由 python Flask 应用程序提供服务。

在前端 javascript 我有这些 CORS 设置：

import VueResource from 'vue-resource'

Vue.use(VueResource)

Vue.http.options.crossOrigin = true
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

在 Flask 应用程序的后端 python 代码中，我有以下 CORS 配置详细信息：

@app.after_request
def add_header(response):
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Headers'] = 'Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization'
    response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS, HEAD'
    response.headers['Access-Control-Expose-Headers'] = '*'
    return response

在 Javascript 前端执行此 HTTP POST 请求时：

this.$http.post("http://localhost:5000/my_endpoint",  my_custom_key: "my custom value")//, emulateJSON: true)
  .then((response) => 
    // do stuff
  )

my_custom_key: "my custom value" 是 HTTP POST 请求的 JSON 正文，然后在 Flask 后端由于某种原因我看到一个 HTTP OPTIONS 请求即将到来，参见。烧瓶日志：

127.0.0.1 - - [26/Jun/2018 21:45:53] "OPTIONS /ad HTTP/1.1" 200 -

在能够从后端检索 JSON 数据之前，必须履行某种来回仪式，但我迷失在这些细节中。

我在网上看到了各种各样的解释，并且我一直在玩弄 vue-resource 配置细节，例如：

在 HTTP POST 请求中添加/删除 emulateJSON: true 在 Vue.js 的配置中添加/删除 Vue.http.options.xhr = withCredentials : true ;

但我无法检索来自后端的 JSON 数据。

在 Vue.js 文档或 https://github.com/pagekit/vue-resource 上搜索“CORS”并未提供有关如何通过跨域资源共享 (CORS) 解决这些问题的任何信息。

如何让 Vue.js 前端与 Flask 后端一起解决这些 CORS 问题？

【参考方案1】：

解决方案是从前端删除：Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'（这实际上没有意义，因为它是通常进入后端响应的 HTTP 标头）。

还要清理更多后端，我发现不需要response.headers['Access-Control-Expose-Headers'] = '*'。可能其他 HTTP 标头可能更小，但现在我保持原样。