Express, React, AxiosでのCORS Errorsの解決方法

Express(backend)とReact(frontend)を用いてweb applicationの開発を行っているとCORS Errosに遭遇した.状況としては,ExpressとReactで開発を行う際には,Reactを3001番ポート,Expressを3000番ポートに開いており,ReactからExpressにユーザー認証を行うためにaxiosのGET methodでリクエストを行う必要があった. 
何も設定しないと,CORS policyに違反する状況となってしまった.

そこで回避するために,Expressのindex.ts(.js)に以下の行を加えた.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*") // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  res.setHeader("Access-Control-Allow-Methods", "POST, GET")
  res.setHeader("Access-Control-Max-Age", "3600")
  res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, x-access-token, x-user-id,Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers")
  next()
})

もし,headerの部分に自分で設定した変数名を渡す場合は,res.setHeader(“Access-Control-Allow-Headers” ) の第2引数の部分に,その変数名を追加する必要がある.
僕の場合は,”x-access-token”, “x-user-id” を追加した.

参考文献

typescript その他
スポンサーリンク
あきとしのスクラップノート

コメント

タイトルとURLをコピーしました