cloudflareを利用してwebアプリを公開したい!part3(HTTP送受信)

はじめに

　前回はWorkerを作成しました。今回はWorkerから情報を取得してwebページに表示するところまでやります。だいぶ短めになるかも。

フロントエンド

　単純にリクエストを出すだけです。app.vueを以下のように編集して送受信のチェックをしてみました。

<template>
 <div>
   <h1>cloudflare testpage</h1>
   <p>{{ helloWorld }}</p>
   <p>{{ response }}</p>
 </div>
</template>
<script setup lang="ts">
import axios from "axios";

const helloWorld = "Hello World!";

const fetchTest = async () => {
 const response = axios
   .get("https://[Workerのアドレス]/")
   .then((res) => {
     return res.data;
   })
   .catch((err) => {
     console.log(err);
   });

 return response;
};
const response = await fetchTest();
</script>

　今回は、前回生成したWorkerが"Hello Axum"を返してくるのでそれを確認できればOK。

　corsの設定は普通にaxumですればいいらしいです。今回はこんな感じにしてみました。

use axum::{http::HeaderValue, routing::get, Router};
use tower_http::cors::CorsLayer;
use tower_service::Service;
use worker::*;

fn router() -> Router {
   Router::new().route("/", get(root)).layer(
       CorsLayer::new()
           .allow_origin(
               "[フロントのOrigin]"
                   .parse::<HeaderValue>()
                   .unwrap(),
           ),
   )
}

#[event(fetch)]
async fn fetch(
   req: HttpRequest,
   _env: Env,
   _ctx: Context,
) -> Result<axum::http::Response<axum::body::Body>> {
   console_error_panic_hook::set_once();
   Ok(router().call(req).await?)
}

pub async fn root() -> &'static str {
   "Hello Axum!"
}

　しかし、試しにcurlやローカルのフロントからリクエストを送ると正常にgetできてしまう......なんでだろう？
　TODOとして継続して調査します。何か手がかりがあればご提供いただけますと嬉しいです！

おわりに

　今回は少し課題が残ってしまいました。こちらについては完成までに解決したいので調査を続けます。
　次回はcloudflare D1を使ってデータベースとの連携周りを作ろうと思います。