サーバー

flaskでAPIを作成した後のクロスオリジン解決法

  /

外部からAPIを呼び出せるようにする

機械学習の推論APIを作成したので、外部からアクセスする際にエラーが出てしまった。

リクエストを投げたら、下記のようなJSONが返り値として戻ってくることを想定

{
  "class_ids": [
    1
  ],
  "rois":[
    [428,331,885,590]
  ],
  "scores":[
    0.9058837890625
  ]
}

呼び出し元はajaxを使用してPOSTで画像データを投げる

console.log()で確認したところ、No ‘Access-Control-Allow-Origin’ が発生していた。
なので、Flask側で CORS (Cross-Origin Resource Sharing)を有効にしてあげる必要がある。

とりあえず、一番簡単な方法である、flask_coresのCORSを使用してみた。
python2系をお使いの方は別の方法が良いです。

$ pip install flask-cores
from flask_cores import CORS

app = Flask(__name__)
CORS(app)

自分が試した感じだと、上記だけだと、Originは*になって解決されたのが、headerがまだ解決されていなかった。
なので、別の方法も試してみた。

from flask_cores import CORS

app = Flask(__name__)
CORS(app)

@api.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

リクエストが来たタイミングの後にheaderに直接書き込む形で対応。
この方法が一番オーソドックスなので、誰にでも馴染みがある書き方かもしれない。
この方法であれば、python2系にも対応しているのでおすすめです。

OriginはCORSで解決していたので、自分の場合はコメントアウトしている。
CORSがうまく行っていない方はコメントアウトを外せば、問題なくレスポンスが帰ってくるはず。

リクエストを投げて、500エラーが返ってくる場合には、API側のプログラムエラーの可能性が高いので、見直してみることをおすすめする。

RELATED POST