ClaudeCodeLab
Use Cases

Complete CORS Configuration Guide：Claude Code 实战指南

了解complete cors configuration guide：Claude Code 实战. 包含实用技巧和代码示例。

CORS配置を通过 Claude Code正确地实现する

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間での安全な通信を制御する仕組みです。配置ミスは安全リスクや機能不全につながります。借助 Claude Code，要件に合ったCORS配置を正確に实现可以。

CORSの基本概念

プリフライト请求の流れ

> CORSのプリフライト请求の仕組みを説明して。
> シーケンス図も含めて。

浏览器は「単純でない请求」的情况下、OPTIONS方法でプリフライト请求を发送し、服务器の允许を确认します。カスタム头部やJSON形式のPOST请求などが該当します。

Express.jsでの配置

環境別CORS配置

> Express.jsのCORS配置创建。
> 要件：
> - 本番は特定オリジンのみ允许
> - 开发はlocalhost允许
> - 认证付き请求支持
> - プリフライト缓存
// src/middleware/cors.ts
import cors from 'cors';

const allowedOrigins: Record<string, string[]> = {
  production: [
    'https://myapp.example.com',
    'https://admin.example.com',
  ],
  development: [
    'http://localhost:3000',
    'http://localhost:5173',
  ],
};

export const corsMiddleware = cors({
  origin: (origin, callback) => {
    const env = process.env.NODE_ENV || 'development';
    const origins = allowedOrigins[env] || allowedOrigins.development;

    // 服务器間通信（originなし）は允许
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} は許可されていません`));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Request-ID'],
  exposedHeaders: ['X-Total-Count', 'X-Request-ID'],
  maxAge: 86400, // プリフライト缓存: 24时间
});

Next.jsでの配置

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: 'https://myapp.example.com' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Max-Age', value: '86400' },
        ],
      },
    ];
  },
};

Nginx/CDNでのCORS配置

> NginxのリバースプロキシでCORS配置添加。
location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    proxy_pass http://backend;
}

トラブルシューティング

よくある错误と解決策

让 Claude Code浏览器のコンソール错误を貼り付けると、原因と修正方法を即座に教えてくれます。

错误例：

Access to XMLHttpRequest at 'https://api.example.com/data' from origin
'https://myapp.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.

よくある原因：

  • 服务器側でCORS头部が配置されていない
  • credentials: true 使用時に Access-Control-Allow-Origin: * を指定している（特定オリジンを指定する必要がある）
  • プリフライト请求のOPTIONS方法をハンドリングしていない

安全上の注意

Access-Control-Allow-Origin: * は认证不要の公開APIにのみ使用して请。认证付き请求では必ず特定オリジンを指定し、credentials: true と組み合わせる必要があります。

总结

借助 Claude Code，環境に応じたCORS配置を正確に实现し、トラブルシューティングも效率化可以。Web安全头部配置やAPI开发指南也建议一并参考。

CORS的详细信息请参阅MDN Web Docs - CORS。

#Claude Code #CORS #security #API #web development

Related Posts