CORS

こんにちは。 エキサイト株式会社の三浦です。 今回は、私が実際に体験した、「存在するはずのAPIなのに、ブラウザからアクセスできなかった話」をしていきます。 作ったはずのAPIにアクセスできない…！？ アクセス失敗の原因 Preflight requestとは Preflight requestの問題点 最後に 作ったはずのAPIにアクセスできない…！？ 私の携わっているサービスは長いこと続いているため、裏側にガタが来ているものも数多く存在しています。 少し前、そんな中の1つで、ブラウザから直にアクセスが来る、とあるAPIを新しいものにリビルドする、という仕事が舞い込んできました。 開発自体は…

はじめまして、10月にサーバーワークスに入社した大浪です。 現在はAS部IE課で修行中（研修中）です。 研修は大変ですが、こんなに楽しいと思った研修もはじめてです。 研修については今度サバワクに書いてみたいと思いますが、今回はAWSのホワイトペーパーの話を書きたいと思います。 AWSホワイトペーパー ホワイトペーパーとはAmazonやAWSコミュニティによってまとめられた技術情報で、AWSの一つの答えを知ることができます。 2022年11月9日現在、287のホワイトペーパーが公開されていました。 AWS ホワイトペーパーとガイド その中のWordPress用のホワイトペーパーの内容に、Word…

ApacheでCORSヘッダの追加 普段はAPIを作ることが多くFlaskの場合だとFlask-CORSを使うので特に意識していなかったがApacheでヘッダの追加ってどうするのだったかなと調べたので備忘録として記載。 今回はAccess-Control-Allow-Originヘッダの追加のみを記載しているが、同じ要領でヘッダを追加すればいくらでもヘッダを増やすことができる。 オリジン間リソース共有 (CORS) https://developer.mozilla.org/ja/docs/Web/HTTP/CORS ヘッダの追加手順 ヘッダを追加するにはmod_headersが有効になってい…

Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "POST" request になってしましました。 問題を切り分ける I think it's the error message that's confusing. return event.respondWith( handleRequest(event…

問題点 Azure Functions で作成した関数アプリを Web API として Blazor から叩こうとしたがこのようなエラーが発生する。 Access to fetch at '<関数アプリのURL>' from origin '<実行元アドレス(localhost)>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set t…

はじめに いま、幸せ？ nikkieです。 GitHubのContributionのように、アイの歌声を聴かせての鑑賞ログを表示してみるの後編です。 前回はCal-heatmapというライブラリを選び、JavaScriptのオブジェクトとしてデータを渡し、それが表示されることを確認しました。 オブジェクトの代わりに、JSONファイル名（相対パス）を渡したところ、開発者ツールのコンソールに「Reason: CORS request not HTTP」と表示され、カレンダーは色づかなくなってしまいました。 こちらを解決する中で知ったことを記事にまとめます。 目次 はじめに 目次 結論：Python…

要約 CORSはサーバからもらったスクリプトをブラウザ側で実行して、同じオリジンではない、別のオリジンのサーバに対してアクセスできる仕組み。 概念のみ以下説明 ブラウザとサーバの仕組み インターネットを使って、Chrome、FirefoxなどのWebブラウザを立ち上げて、何かしら検索すると、画面に文章、画像、動画などのデータが表示されます。ブラウザにデータを表示するには、データを保管しているサーバにアクセスする必要があります。サーバーから受け取ったデータの種類は動画、画像などもありますが、HTML、CSS、JavaScriptといったブラウザ上の画面を構成するためのスクリプトもサーバ側から受け…

Dockerで構築。flaskがデフォルトで勝手に末尾のスラッシュをURL補完してリダイレクトする問題と、 flask_corsとnginxの設定が重複する問題 この2つが混ざってて2日ほどハマった。結論としては、 リダイレクトせずスラッシュ無しを許容する（フロントエンド側のリクエスト方法の統一・管理は別問題とする）対応と、nginxの不要な設定を消す。 これでやっと動くようになった。flask_cors from flask_cors import CORS # ～中略～ # CORS CORS( app, expose_headers='token', supports_credentia…

はじめに 前編 後編 技術スタック フロントエンド： バックエンド： データベース： リポジトリ Rails APIを叩いてユーザー情報をDBに保存する Railsのプロジェクトを作成する rails new .gitを削除する モジュール名を変更する データベースを作成しモデルを準備する ルーティングを設定する コントローラーを準備する フロントエンドとバックエンドの連携を設定する rack-cors axios Next.js側からRails APIを叩き、ユーザー情報をDBに保存する ユーザー情報を削除するコンポーネントも用意しておく indexページに、作成したコンポーネントを配置する…

Node.jsの設計思想・動作から理解し、アプリケーション開発の実践的なスキルを身につける 2023/1に出たばかりの本です。著者の伊藤康太さんは元Yahooのスペシャリスト認定制度の黒帯保持、有識者による一冊。タイトルは「Node.js入門」とありますがNode.js本体の話にとどまらずJavaScriptの文法の話、ExpressによるWebアプリにCLIツールにフロント/バックエンド両方の開発や運用...と、実質最新のフロントエンド・バックエンド全般を概観できる本となっています。384Pなのでそんなに分厚くはないですね。 Node.jsは仕事でもインストールはしてるしたまに使うこともある…

1週間の振り返り チーム開発のissue対応 FBCのイベントを外部カレンダーで購読できるようにする（継続） 提出物の表示をVue.jsに置き換える JSPrimer輪読会 Entaku.rbでのLT発表 自作サービスのDB設計 自作サービスのCIを設定した 自作サービスの相談をしたりペアプロをしたり 1週間の成果 FBCのイベントを外部カレンダーで購読できるようにする（継続） メンターさんにペアプロをしていただき、controllerを切り出した場合のnamespaceの切り方を教えていただきました。 ここがおかしかったから、リクエストが処理されていなかった・・・ ルーティング周りの理解が怪…

はじめに 前編 後編 技術スタック フロントエンド： バックエンド： データベース： リポジトリ 下準備 Google APIにアクセスできるように準備する 認証ライブラリのNextAuth.jsを使ってGoogleログイン機能を実装する Next.jsプロジェクトを作成する 必要なnpmをインストールする API routeの設定を行う .env.localファイルを生成しGoogle認証のために必要な環境変数を設定する Session Providerの設定 ログイン機能を作成する 毎回ログインする度にユーザーに再認証を要求する ログアウト機能を作成する indexページを用意して、ログイ…

はじめに こんにちは、エンジニアのクロ(@kro96_xr)です。 最近、5年くらい前にQiitaで書いた記事にちょこちょこいいねをいただくんですよね。 qiita.com なぜ今更この記事を見てもらえているんだろうと考えていたところ、ChatGPT APIを用いたLineBotの作成に取り組んでいる人がいるのではないかと思いました。というわけで私も試してみることにしました。 二番煎じどころではありませんが、自身の体験を共有することで皆さんの参考になればと思います！ なお、今回検証したコードは、以下のリポジトリにまとめています。 github.com ※先にお詫びです 記事を書きながらも検証し…

こんにちは。Retty インフラチームの幸田です。 今回は Retty で利用している GraphQL API に WAF (Web Application Firewall) を導入したのでその話をしようと思います。 Retty と GraphQL API GraphQL を利用した攻撃 リスクを伴う設定 悪意のあるクエリ Web API の脆弱性 Fastly Next-Gen WAF について GraphQL Inspection WAF のセットアップ GraphQL Inspection の有効化 Templated Rule 動作確認 ブロックについて Site Alerts を用…

現在 ChromeではHTTPの通信をBrotliの辞書で圧縮する『Feature: Compression dictionary transport with Shared Brotli』という仕組みの開発が進められています。この仕組は、来週開催されるIETF 116のサイドミーティングでも議論が行われる予定になっています。なので、軽くその仕組について予習をしておく。仕組みについて説明したドキュメントはこれ github.com Compression dictionary transport 基本的なアイデアとしては、サーバからBrotliの辞書データを提供して、以降のHTTP通信では(使…

はじめに これにいろいろ機能をつけてきた。 さぁ次はサーバー間通信かな。 localでのサーバー間通信はやってきたけど、本番環境でのサーバー間通信はやったことがない。 ワクワク。やっていこ！ 前提イメージ さくらVPSにサーバー間通信の機能があるっぽいけど、どうなんだろ。 なるべく「これ便利サービス」は使いたくない。 もしできなそうであればネットワークを構築する必要がありそうなので頑張るわ。 調査 vps.sakura.ad.jp → これでやるっぽい。こんな簡単にできるのか？ manual.sakura.ad.jp → manualはこれ。やってみるか。 phoenixknight.jp →…

以前jQueryを使ってウェブサイトを作ってあったのだが 機能を追加するので最近のフレームワークを使ってみた JavaScriptのフレームワークとして以下の3つが有名らしい Angular React Vue.js web開発したことないし正直どれが良いかわからない 色々調べたところこの中ではVue.js学習コストが低いらしい そこでVue.jsでサイトを書き換えることにした以前作ったサイトは複数のページを移動するが 実際はhtmlのファイルは一つだけで タグのidを使って表示するコンテンツを切り替えていた 参考にしていたのはこの本 write_adv(adv_url_034) 今考えるとS…

小西秀和です。 以前、次の記事でAWS Amplify Hosting(AWS Amplify Console)の構築方法について紹介しました。 AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify Console) しかし、AWS Amplify Hosting(AWS Amplify Console)では基本認証や証明書追加の機能はありますが、IP制限の機能がサポートされていません。 そのため、今回は内部がAmazon S3とAmazon CloudFrontで構成されていると推測されるAWS Amplify Hosti…

小西秀和です。 この記事は過去に投稿した次の記事の続編で、SSL/TLS証明書(AWS Certificate Manager)、基本認証(Lambda@Edge)に加えてIP制限(AWS WAF)を追加したパターンでAmazon S3とAmazon CloudFrontによる静的ウェブサイトホスティングをAWS CloudFormationテンプレートとAWS Lambdaカスタムリソースを使用して構成するものです。 AWS LambdaカスタムリソースでSSL証明書・基本認証・CloudFrontオリジンフェイルオーバーを作成するAWS CloudFormationスタックを別リージョンに…