Question

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

无法加载http://localhost:5000/my_endpoint：请求标头字段不允许访问控制允许来源飞行前响应中的Access-Control-Allow-Header。

浏览器正在从带有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主体，然后由于某种原因在Flask后端中，我看到一个HTTP OPTIONS请求，请参见。 Flask日志：

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）解决这些问题的任何信息。

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

Answer 1

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

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

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

1 个答案: