Laravel API + React 프런트 엔드 요청, Axios는 404 - Access-Control-Allow-Origin을 반환합니다.

Question

<p>React에서 Laravel API에 POST 요청을 하려고 합니다. 개발 모드에서 요청을 보내면 요청이 성공하지만 Apache2에 API(:8000) 및 프런트엔드(:80)를 배포하면 엄격 모드 정책에 의해 요청이 차단되고 CORS 오류가 나타납니다. 요청에 액세스 제어가 누락되었습니다. 응답 시 Allow-Origin 및 404가 발생했습니다. 하지만 Laravel 및 React 페이지는 브라우저에서 액세스할 수 있습니다. 요청을 하기 위해 Axios를 사용합니다. 그리고 웹사이트에는 동일한 기본 URL <code>http://localhost</code>이 있어야 합니다. 나는 많은 솔루션을 시도했지만 아무것도 효과가 없었습니다. </p>

Laravel 10.x 커널

<p>서버 응답에 헤더를 추가하는 미들웨어를 만들 것을 제안하는 많은 사용자를 보았습니다.Laravel에는 기본적으로 유사한 콘텐츠가 추가되어 있습니다(<code>conf/cors.php</code>). 내 파일은 다음과 같습니다</p> <pre class="brush:php;toolbar:false;">'경로' => ['http://127.0.0.1:8000','http://localhost','api/*', '성소/csrf-쿠키'], 'allowed_methods' => ['*'], 'allowed_origins' => ['*'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => ['*'], '최대 연령' => 'supports_credentials' => 거짓,</pre> <p><code>Kernel.php</code>에 다음과 같이 등록됩니다</p> <pre class="brush:php;toolbar:false;">보호된 $middlewareAliases = [ // 'cors' => AppHttpMiddlewareCors::class, <- 현재 사용되지 않는 맞춤 미들웨어입니다. 'cors' => IlluminateHttpMiddlewareHandleCors::class, '인증' => AppHttpMiddlewareAuthenticate::class, ... 보호된 $미들웨어 = [ // AppHttpMiddlewareCors::class, <- 이것은 사용자 정의입니다. 현재 사용되지 않는 미들웨어 IlluminateHttpMiddlewareHandleCors::class,</pre> <p>맞춤 미들웨어를 사용할 때 <code>api.php</code>에 있는 내용입니다</p> <pre class="brush:php;toolbar:false;">Route::group(['middleware'=>'cors','prefix'=>'api'], 함수 () { 경로::post('/signup',[AuthController::class, 'signup']); 경로::post('/login',[AuthController::class, 'login']); Route::post('/logout',[AuthController::class, 'logout']); 경로::post('/user/post',[PostController::class,'createPost']); 경로::get('/user/post',[PostController::class,'getPostsInMonth']); 경로::post('/media/upload',[UploadController::class,'upload']); });</pre> <p>맞춤형 미들웨어를 사용해도 성공하지 못합니다</p> <pre class="brush:php;toolbar:false;">클래스 코르스 { 공개 함수 핸들($request 요청, $next 클로저): 응답 { $next($request) 반환 ->header('액세스 제어-허용-원본', '*') ->header('액세스 제어 허용 방법', 'GET, POST, PUT, PATCH, DELETE, OPTIONS') ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Origin, X-Requested-With'); } }</pre> Apache Laravel VirtualHost의

文件中添加标头

<pre class="brush:php;toolbar:false;"><VirtualHost *:8000> 서버 이름 website.com ServerAlias ​​*.website.com ServerAdmin webmaster@localhost DocumentRoot .../laravel/public 헤더에 Access-Control-Allow-Origin "*"를 추가합니다. 헤더에 Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"을 추가합니다. <디렉터리 ".../laravel"> 헤더 세트 Access-Control-Allow-Origin "*" 헤더 세트 Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization" 주문 허용, 거부 모두에서 허용 모두 부여 필요 </디렉토리> </VirtualHost></pre> <p>React Apache VirtualHost 文件看起来与 Laravel 文件不常似</p> <p>내가 소유한 회사:(</p> <h1>Laravel/public 중형 .htaccess</h1> <pre class="brush:php;toolbar:false;"><IfModule mod_headers.c> 헤더 세트 Cross-Origin-Resource-Policy 'cross-origin' 헤더 세트 Access-Control-Allow-Origin "*" </IfModule></pre> <h1>设置API地址제작为代理</h1> <p>지금<code>package.json</code>中我添加了这一行</p> <pre class="brush:php;toolbar:false;">"프록시": "http://localhost:8000",</pre> <p>还尝试使用<code>http-proxy-middleware</code>包 와react/src文件夹中的<code>setupProxy.js</code></p> <pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = 함수(앱) { 앱.사용( '/api/*', createProxyMiddleware({ 대상: 'http://localhost:8000', ChangeOrigin: 사실, }) ); };</pre>

axios 客户端脚本

<pre class="brush:php;toolbar:false;">"axios"에서 axios 가져오기;; const axiosClient = axios.create({ 기본 URL: "http://127.0.0.1:8000/api", }) axiosClient.interceptors.request.use((config)=>{ const 토큰 = localStorage.getItem('ACCESS_TOKEN'); config.headers = { '승인': `전달자 ${token}`, '액세스 제어-허용-원본': '*' } 구성 반환; }) axiosClient.interceptors.response.use((response)=>{ 응답 반환; },(오류)=>{ const {응답} = 오류; if(응답 && response.status == 401){ localStorage.removeItem('ACCESS_TOKEN'); } 오류 발생; }) 기본 axiosClient 내보내기;</pre> <p>내 설정으로 인해 사이트가 안전하지 않다는 것을 알고 있지만 이는 개발 목적으로만 사용됩니다. 3일 동안 이 문제로 어려움을 겪었습니다.><</p> <p>이것이 제가 얻은 결과입니다(죄송하지만 스택에서는 서식 문제로 인해 이미지를 업로드하는 것을 원하지 않습니다)</p> <pre class="brush:php;toolbar:false;">![1]: https://pasteboard.co/feqZ6JrGrvBM.png ![2]: https://pasteboard.co/nluAk8scYXzY.png ![3]: https://pasteboard.co/JF7yiHhH4XtB.png</pre></p>

Answer 1

마지막으로 전체 프로젝트를 /var/www 폴더 밖으로 이동하고 각 사이트의 공용 폴더에 대해서만 심볼릭 링크를 만들었습니다. 또한 设置文档根路径与 같은 경로에 있습니다. 그 후 Laravel 프로젝트의 기본 CORS 핸들러가 정상적으로 작동하기 시작합니다.