Vue.js 由于不允许预检，导致前端与 Flask 后端交互出现 CORS 问题 headers

Question

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

Failed to load http://localhost:5000/my_endpoint: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

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

URL http://localhost:5000/my_endpoint 是由 python Flask 应用程序提供的 HTTP GET/POST 端点。

在前端 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 body，然后在 Flask 后端由于某种原因我看到一个 HTTP OPTIONS 请求，cf . Flask 日志：

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

在能够从后端检索 JSON 数据之前，必须有某种 back/forth 仪式来纪念，但我迷失在这些细节中。

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

adding/removing {emulateJSON: true} 到 HTTP POST 请求
adding/removingVue.http.options.xhr = { withCredentials : true };到Vue.js

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

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

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

Answer 1

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

此外，为了进一步清理后端，我发现不需要 response.headers['Access-Control-Expose-Headers'] = '*'。可能其他 HTTP headers 可能更苗条，但现在我保持原样。

Vue.js 由于不允许预检，导致前端与 Flask 后端交互出现 CORS 问题 headers

Vue.js frontend interacting with Flask backend CORS issues due to not allowed preflight headers

cors

flask

vue.js

vue-resource