cors 문제가 일어났을 경우 해결 방안

node로 작업했을 경우에는 require cors 진행해서 연결만 하면 해결이 됬는데  laravel 로 연결해서 진행할 때에는 

cors  error 해결하기 위해 하단에 nginx  수정 및  react proxy 및 header 추가해서 진행했지만 cors  문제는 해결되지 않았습니다. 

그런데 여러 시도 끝에 php 버전 설정 후 실행 및  laravel-cors  셋팅 후 진행하니 해결이 되었습니다. 

 

성공 접근 방법

1. vagrant 환경에서 php 설정된 버전 정상 실행 확인

2. composer 환경에서 laravel-cors 설정 후  백엔드 영역 셋팅

3. 실행할 때마다 1번 php start를 진행

 

1.  vagrant 환경에서 php 설정된 버전 정상 실행 확인하는 방법

먼저 폴더 php가 어떻게 설정되어있는 지 확인해주시길 바랍니다. php 설정하는 방법은   

https://asufi.tistory.com/entry/Windows-10-64bit-%ED%99%98%EA%B2%BD-PHP-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

[PHP] Windows 10 64bit 환경 PHP 설치하기

다 하시면 php 시스템 변수 편집 확인하시면 됩니다. 

그리고 이 작업은 virtual box 설정이 정상적으로 완료가 되고 vagrant up, vagrant ssh가 정상적으로 돌아갈 때 진행되는 과정입니다. 제대로 안된다면 제가 올린 laravel 셋팅 A-Z 과정을 참고해주시길 바랍니다.

1. sudo service php7.4-fpm start (1-1 참고)
2. sudo update-alternatives --set php /usr/bin/php7.4 (2-1 참고)
3. nginx php 실행 폴더 위치 설정 (3-1, 3-2)참고  
   • 1-1) php7.4는 현재 제가 php  버전을 7.4로 맞췄기 때문에 이렇게 진행을 했는데 시스템 변수 편집에서 설정한대로 그에 맞게 변경해서 진행하시면 됩니다.
   • 2-1) php7.4를 기본 php 버전으로 설정 -> 코드 설정은 1-1과 동일한 위치에서 진행합니다. 
   • 3-1) \etc\nginx\sites-available에서 nginx 설정한 폴더를 sudo vi [프로젝트] 확인하시면 됩니다. 
   • 3-2) 초기에서 생성되는 homestead.test 로 예를 들어서 설명하자면 root 및 location이 다 설정되었다는 전제조건하에 지금 현재 봐야할 부분은 fastcgi_pass 부분입니다. php 버전이 현재 사용자가 설정한 php 와 동일한 지 확인한 후 1번에 실행했던 버전과 동일하게 진행하시면 됩니다. 

homestead.test
server_name .homestead.test;
root "/home/vagrant/code/homestead/build";

location / {
        try_files $uri $uri/ /index.html$is_args$args;
        
} 

fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;

 

1-1 참고

 

2. composer 환경에서 laravel-cors 설정 후  백엔드 영역 셋팅하는 방법

1. composer require fruitcake/laravel-cors
   • laravel 셋팅할 때 composer이 셋팅되어있으므로 별도로 설치하실 필요가 없습니다.
   • 안될 경우) 이미 기존에 있을 경우 충돌이 일어날 수 있기 때문에 composer remove barryvdh/laravel-cors fruitcake/laravel-cors 을 진행하고 제거된 후 다시 시작해주시길 바랍니다.
2. 해당 백엔드 폴더에서 app\Http\Middleware\VerifyCsrfToken.php에서 except class 추가적으로 설정을 진행합니다.

    protected $except = [
        'api/*',
        'sub.domain.zone' => [
          'prefix/*'
        ],
    ];

---

여러 접근 방법(실패)

1. nginx location에 header 설정해서 access controll allow orign 진행

참조) https://enable-cors.org/server_nginx.html

enable cross-origin resource sharing

2. react에서 프론트 header에 access controll allow orgin 진행

    axios(`${process.env.NEXT_PUBLIC_API_URL}/api/main`, {
      method: "POST",
      data: {
        status: status,
        sort: sort,
      },
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        "Access-Control-Allow-Origin": "http://127.0.0.1:3000",
      },
    })

3. react proxy  설정해서 middlware  연결해서 진행 

참고) https://biio-studying.tistory.com/238

CORS에러 해결 방법 : CRA에서 Proxy 설정하기