CORS 문제를 해결하는 방법

CORS 문제를 해결하려면 웹 서버(Apache 또는 Nginx 등), 백엔드(Django, Go 또는 Node.js 등)에 적절한 헤더를 추가해야 합니다. , 또는 프론트엔드 프레임워크(예: React 또는 Next.js)에서. 다음은 각 플랫폼에 대한 단계입니다.

1. 웹서버

아파치

Apache의 구성 파일(예: .htaccess, httpd.conf 또는 apache2.conf) 또는 특정 가상 호스트 구성 내에서 CORS 헤더를 구성할 수 있습니다.

CORS를 활성화하려면 다음 줄을 추가하세요.

<ifmodule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</ifmodule>

• 특정 도메인에 CORS를 적용하려면:

  Header set Access-Control-Allow-Origin "https://example.com"

• 자격증명이 필요한 경우:

  Header set Access-Control-Allow-Credentials "true"

mod_headers 모듈이 활성화되어 있는지 확인하세요. 그렇지 않은 경우 다음을 사용하여 활성화하세요.

sudo a2enmod headers
sudo systemctl restart apache2

엔진엑스

Nginx에서는 nginx.conf 또는 특정 서버 블록 내에서 CORS 헤더를 구성할 수 있습니다.

다음 줄을 추가하세요.

server {
    location / {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    }

    # Optional: Add for handling preflight OPTIONS requests
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";
        return 204;
    }
}

• 자격증명이 필요한 경우:

  add_header Access-Control-Allow-Credentials "true";

그런 다음 Nginx를 다시 시작하세요.

sudo systemctl restart nginx

---

2. 백엔드 프레임워크

장고

Django에서는 django-cors-headers 패키지를 사용하여 CORS 헤더를 추가할 수 있습니다.

1. 패키지 설치:

   pip install django-cors-headers

1. settings.py의 INSTALLED_APPS에 'corsheaders'를 추가하세요.

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]

1. MIDDLEWARE에 CORS 미들웨어를 추가하세요.

   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...
   ]

1. settings.py에서 허용되는 출처를 설정하세요.

   CORS_ALLOWED_ORIGINS = [
       "https://example.com",
   ]

• 모든 출처를 허용하려면:

  CORS_ALLOW_ALL_ORIGINS = True

• 자격증명이 필요한 경우:

  CORS_ALLOW_CREDENTIALS = True

• 특정 헤더나 메소드를 허용하려면:

  CORS_ALLOW_HEADERS = ['Authorization', 'Content-Type']
  CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

고(고랑)

Go에서는 HTTP 핸들러에서 CORS를 수동으로 처리하거나 rs/cors와 같은 미들웨어를 사용할 수 있습니다.

rs/cors 미들웨어 사용:

1. 패키지 설치:

   go get github.com/rs/cors

1. 지원서에 사용하세요:

   package main

   import (
       "net/http"
       "github.com/rs/cors"
   )

   func main() {
       mux := http.NewServeMux()

       // Example handler
       mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
           w.Write([]byte("Hello, World!"))
       })

       // CORS middleware
       handler := cors.New(cors.Options{
           AllowedOrigins:   []string{"https://example.com"}, // Or use * for all
           AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
           AllowedHeaders:   []string{"Authorization", "Content-Type"},
           AllowCredentials: true,
       }).Handler(mux)

       http.ListenAndServe(":8080", handler)
   }

Node.js(익스프레스)

Express(Node.js)에서는 cors 미들웨어를 사용할 수 있습니다.

1. cors 패키지를 설치합니다:

   npm install cors

1. Express 앱에 미들웨어를 추가하세요.

   const express = require('express');
   const cors = require('cors');
   const app = express();

   // Enable CORS for all routes
   app.use(cors());

   // To allow specific origins
   app.use(cors({
       origin: 'https://example.com',
       methods: ['GET', 'POST', 'PUT', 'DELETE'],
       allowedHeaders: ['Authorization', 'Content-Type'],
       credentials: true
   }));

   // Example route
   app.get('/', (req, res) => {
       res.send('Hello World');
   });

   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });

---

3. 프런트엔드 프레임워크

반응

React에서 CORS는 백엔드에서 처리되지만 개발 중에는 CORS 문제를 방지하기 위해 API 요청을 프록시할 수 있습니다.

1. package.json에 프록시를 추가합니다.

   {
     "proxy": "http://localhost:5000"
   }

개발 중 요청을 포트 5000에서 실행되는 백엔드 서버로 프록시합니다.

프로덕션의 경우 백엔드에서 CORS를 처리해야 합니다. 필요한 경우 더 많은 제어를 위해 http-proxy-middleware와 같은 도구를 사용하세요.

Next.js

Next.js에서는 API 경로에 CORS를 구성할 수 있습니다.

1. API 경로에 대한 사용자 정의 미들웨어를 만듭니다.

   export default function handler(req, res) {
       res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
       res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
       res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');

       if (req.method === 'OPTIONS') {
           // Handle preflight request
           res.status(200).end();
           return;
       }

       // Handle the actual request
       res.status(200).json({ message: 'Hello from Next.js' });
   }

1. next.config.js에서는 응답 헤더를 수정할 수도 있습니다.

   module.exports = {
       async headers() {
           return [
               {
                   source: '/(.*)', // Apply to all routes
                   headers: [
                       {
                           key: 'Access-Control-Allow-Origin',
                           value: '*', // Allow all origins
                       },
                       {
                           key: 'Access-Control-Allow-Methods',
                           value: 'GET, POST, PUT, DELETE, OPTIONS',
                       },
                       {
                           key: 'Access-Control-Allow-Headers',
                           value: 'Authorization, Content-Type',
                       },
                   ],
               },
           ];
       },
   };

---

헤더 추가 위치 요약:

• 웹 서버(Apache, Nginx): 서버 구성 파일(예: .htaccess, nginx.conf)에서 구성합니다.
• 백엔드 프레임워크:
  • Django: django-cors-headers를 사용하세요.
  • 이동: 헤더를 수동으로 추가하거나 rs/cors와 같은 미들웨어를 사용하세요.
  • Node.js(Express): cors 미들웨어를 사용하세요.
• 프런트엔드: 개발 중에는 프록시 설정(예: React의 프록시 또는 Next.js 사용자 정의 헤더)을 사용하여 CORS 문제를 방지하되 항상 프로덕션 백엔드에서 CORS를 처리하세요.

위 내용은 CORS 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!