POST(Flask API)上没有“ Access-Control-Allow-Origin”标头

时间:2018-10-25 19:07:59

标签: python post vue.js flask fetch

我正在使用我的第一个API,到目前为止,我已经能够在Google上寻求帮助,但是我仍然坚持使用它:

我的POST请求在Postman上工作正常,但是当我尝试在HTML中使用表单提出POST请求时,出现以下错误:

  

从原点“ http://127.0.0.1:5000/api/v1/units”到“ http://localhost:63342”的获取操作已被CORS策略阻止:对预检请求的响应未通过访问控制检查:否“ Access-Control-Allow-来源的标头出现在请求的资源上。如果不透明的响应满足您的需求,请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

     

index.html:1未捕获(承诺)TypeError:无法获取

我的Flask应用中的方法:

@marshal_with(unit_fields)
def post(self):
    args = self.reqparse.parse_args()
    unit = models.Unit.create(**args)
    return unit, 201, {"Access-Control-Allow-Origin": "*",
                       "Access-Control-Allow-Methods": "POST",
                       "Access-Control-Allow-Headers": "Content-Type",
                       "Location": url_for("resources.units.unit", id=unit.id)}

Vue.js应用程序中的提取调用:

addUnit: function() {
       fetch("http://127.0.0.1:5000/api/v1/units", {
           method: "POST",
           headers: {
               "Content-Type": "application/json"
           },
           body: JSON.stringify({
               name: document.querySelector("#unitName").value,
               faction: document.querySelector("#unitFaction").value
           })
       })
   }

感谢您提供任何克服问题的建议:)

1 个答案:

答案 0 :(得分:2)

太棒了,谢谢,斯蒂芬!它所需要的只是:

from flask_cors import CORS

CORS(app, support_credentials=True)

在app.py中!