Firebase Hostingにデプロイしたページから、Cloud RunにデプロイしたPythonプログラムに画像をPOSTし、確認のため画像をreturnしたいのですが、『CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.』とエラーが出てしまいます。
こちらのサイトを参考に、サンプル通りのコードでFirebase hostingとCloud Runの連携を行うことはできました。適当な文字列なども、returnすることができますがrequest.files['image']をreturnすると上記のエラーが発生します。
以下、ソースコードです。
他に必要な情報があればお願いします。
Vue.js
<template> <dev> <form enctype="multipart/form-data" @submit.prevent="postImage" method="POST"> <input type="file" name="image" accept="image/png, image/jpeg, image/jpg" @change="uploadImage" ref="image"> <button type="submit">submit</button> </form> <img :src="url" width="50%"> </dev> </template> <script> import Vue from "vue"; import axios from "axios"; export default Vue.extend({ data(){ return{ url:null, result: '', } }, methods:{ // 画像プレビュー uploadImage:function(){ this.url = URL.createObjectURL(this.$refs.image.files[0]); }, // 画像POST async postImage() { var params = new FormData() params.append('image', this.result) await axios.post( "CouldRunのURL" , params ) .then(function (response) { console.log(response) }) }, } }); </script>
Python
from flask import Flask, request from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) @app.after_request def after_request(response): response.headers.add('Access-Control-Allow-Origin', '*') response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization') response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS') return response @app.route('/', methods=['POST']) def result(): return request.files['image'] if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=8080)
まだ回答がついていません
会員登録して回答してみよう