初心者向け。FastAPI とSvelteの開発でのCORS設定

## はじめに
今回、会社の研修でFastAPIとSvelteで環境構築を行うことがあったので、備忘録として残していきたいと思います。

## 前提
fastAPIのバージョン　0.111.0
Svelteのバージョン   4.2.7  
OS　MacOS

## 『クロスオリジン』とは
クロスオリジンとは特定のドメインからの通信を許可する設定になります。
この設定を行うことでFastAPI側とSvelte側の通信が可能となります。


## FastAPI側の設定
① .envファイルを作成して設定を変更
`from fastapi.middleware.cors import CORSMiddleware` で`CORSMiddleware` をインポート


```python:.env

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    'http://localhost:5173', 
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*']
)
```

この部分に許可するオリジン（今回はSvelte側のサーバーのURL）を追加
```python:.env
origins = [
    'http://localhost:5173', #ここにSvelte側のサーバーのURLを設定
]
```

②APIを返す処理を書く
今回はsample.pyというファイルを作成し、APIを返す処理を書いていきます
```python:sample.py
from fastapi import FastAPI

app = FastAPI()

# @app.get("/api")に変更
@app.get("/api")
async def root():
    return {"message": "Hello World"}
```

## Svelte側の設定
①`svelte.config.js`の設定を変更
```JavaScript:svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		
		adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            
            // ここを追加
            pages: '../server/static',
            assets: '../server/static',
            fallback: 'index.html',
            precompress: false,
            strict: true
        })
	}
};

export default config;
```

②`vite.config.js`にプロキシの設定を追記
```JavaScript:vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	server: {
	// ここを追加
		proxy: {
				'/api': {  // ここにはsample.pyに書いたルーティングを書く
				'target': env.VITE_API_BASE_URL
				changeOrigin: true,
			}
		}
	}
});
```
## .envファイルの設定
フロントエンドのプロジェクトの直下に.envというファイルを作成して以下を追記します。
```javascript:.env
// ここを追記
VITE_API_BASE_URL='fastAPI側のポート'
```
## 動作確認
①ボタンを押してVITE_API_BASE_URL='fastAPI側のポート'で設定したAPIを叩く

```JavaScript:+page.svelte

<script>
	import { onMount } from 'svelte';
	import Counter from './Counter.svelte';
 
    async function fetchData() {
		console.log('おした');
		try {
			const response = await fetch(`/api`);
			if (response.ok) {
				console.log(`/api`);
				const data = await response.json();
				console.log(data);
			}
		} catch (e) {
			console.error('Failed to fetch data:', e);
		}
	}
 </script>

 <section>
	<button on:click={fetchData}>CORSチェック</button>
</section>
 ```

 『CORSチェック』ボタンを押してみてブラウザのコンソールにこのように表示されればOKです！！
 ![スクリーンショット 2024-07-08 13.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772013/2ab1c68b-eeae-efa0-b5cb-ed6cde703b70.png)

## まとめ
いかがでしたでしょうか？？
今回の設定ができていれば、フロントエンド側とバックエンド側の連携はバッチリです！
間違いなどありましたら教えてくださると幸いでございます。
それでは〜！！