ローカル環境下でSpringBootのRestApiをNextjsから叩く 結論：Contollerクラスに@CrossOrigin付与して解決


# 概要
SpringBootのRestApiをNext.jsから使います。

Apiはクライアントサイドで叩く方法を採用します。

SpringBootのURL：http://localhost:5000
Next.jsのURL:http://127.0.0.1:3000/


# 開発環境
OS:windows10

バックエンド側：
IDE:IntelliJ Community
spring-boot-starter-parent 2.75
java　：　11

Postman:Windows版　検証用

フロントエンド：
IDE:VScode
Next.js
├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next@13.0.6
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

# 手順
## SpringBoot側の設定 @CrossOriginアノテーション付与
Next.jsからのCORを許可するために@CrossOriginアノテーションを追加します。

``` Contoller.java
@Data
class Sampledata{
    String name;
    float price;

    public Sampledata(String name, float price) {
        this.name = name;
        this.price = price;
    }
}

@RestController
@CrossOrigin(origins = "http://127.0.0.1:3000")
public class ProductRestController {


    @GetMapping("/api/products")
    public Sampledata hello(){
        return new Sampledata("うまい棒",12);
    }
}

```


実行してPostmanで動きを確認します。OKです。
ただし@CrossOriginが効いてるかは確認できてません。
あくまでバックエンドの確認ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/35064fb0-a1a1-52fc-ae99-785502b09b35.png)



## Next.js側の設定 index.tsxをいじるだけ
npm辺りの設定はしなかったですね。

### プロダクトコード

``` index.tsx
import { useEffect, useState } from 'react';
import Footer from '../component/footer'
import Header from '../component/header'



export default function Home() {
	ApiFetch();
	return (
		<>

		</>
	)
};


export const ApiFetch = () => {
	const [stones, setStone] = useState([]);

	useEffect(() => {
		// APIをfetchする(呼び出す)
		fetch("http://localhost:5000/api/products", { method: "GET" })
			// レスポンスのデータ形式をjsonに設定
			.then((res) => res.json())
			// APIから渡されるレスポンスデータ(data)をstateにセットする
			.then((data) => {
				setStone(data);
			});
	}, []);
}

```

#### 動作確認
GoogleChromeの検証のNetWworkで確認
Apiが呼ばれたことを確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/deaf40ec-9ec3-5de6-8f7e-a19793d4c79f.png)



# エラーパターン
## ＠CrossOriginがない場合
PostmanではOKになるが、 Next.js側でレスポンスがエラーになる。googleの検証機能で確認。
```error.message
Access to fetch at 'http://localhost:5000/api/products' from origin 'http://127.0.0.1:3000' 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 the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```
画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/799919dd-5811-ff47-96ce-a2945303f46c.png)



## SpringSecuirty側でcorを設定する。

``` SecurityConfig.java

http.cors().disable()

```
→エラー解消せず
Springmvc側を設定する必要があり。
今回の場合は認可しなくても使えるApiだから？（わからん）


# 参考
Next.jsで外部APIを叩く３つのパターン

https://blog.narumium.net/2020/10/01/next-js%E3%81%A7%E5%A4%96%E9%83%A8api%E3%82%92%E5%8F%A9%E3%81%8F%EF%BC%93%E3%81%A4%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/


SpringBoot CORSの設定

https://b1san-blog.com/post/spring/spring-cors/

SpringSecurity cor

https://docs.spring.io/spring-security/reference/reactive/integrations/cors.html