时间戳

首页 > 解决方案 > 由于不允许的预检标头，Vue.js 前端与 Flask 后端 CORS 问题交互

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

问题描述

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

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

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

URLhttp://localhost:5000/my_endpoint是一个由 py​​thon 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
  })

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

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

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

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

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

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

在这些 CORS 问题上，如何让 Vue.js 前端与 Flask 后端一起工作？

标签： flaskvue.jscorsvue-resource

解决方案

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

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

推荐阅读