Vue.js前端与Flask后端CORS问题交互，因为不允许飞行前标头

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

未能加载：请求标头字段 不允许访问控制允许来源 访问控制允许飞行前响应中的标头

浏览器正在从Vue.js前端应用程序加载网页，其中包含网页包等，并Vue资源以执行对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主体，然后出于某种原因，在Flask后端我看到一个HTTP选项请求，请参阅Flask日志：

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

在能够从后端检索JSON数据之前，必须进行某种前后仪式，但我对这些细节感到迷茫

在互联网上，我看到了各种各样的解释，我一直在玩vue资源的配置细节，比如：

• 向HTTP POST请求添加/删除

  {emulateJSON:true}

• 添加/删除

  Vue.http.options.xhr={withCredentials:true}到Vue.js的配置

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

在Vue.js文档或上搜索“CORS”不会提供有关如何通过跨源资源共享（CORS）解决这些问题的任何信息

---

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

解决方案是从前端删除：

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

（这实际上没有意义，因为它是一个通常从后端进入响应的http头）

另外，为了进一步清理后端，我发现不需要

response.headers['Access-Control-Expose-headers']='*'

。也许其他HTTP头可以更薄一些，但现在我保留它们的原样