toolsmoah

CORS Tester

Test and debug Cross-Origin Resource Sharing (CORS) policies and API requests

Request Settings
Configure your API request for testing
Example Requests
Try these predefined API requests
CORS Information
Basic information about CORS

What is CORS? CORS (Cross-Origin Resource Sharing) is a mechanism that allows web browsers to make cross-origin requests (different domain, protocol, or port) from scripts running in the browser.

Key CORS Headers

  • Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource
  • Access-Control-Allow-Methods: Specifies which HTTP methods are allowed
  • Access-Control-Allow-Headers: Specifies which HTTP headers can be used
  • Access-Control-Allow-Credentials: Specifies whether to include credentials (cookies, HTTP authentication)

๐Ÿ’ก CORS Solutions

Server-Side Solutions

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Client-Side Solutions

1. Using a Proxy Server:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (GET only):

// Limited but simple solution
          fetch('api?callback=handleResponse')

๐Ÿ”ง CORS Configuration by Environment

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

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

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

CORS Configuration by Environment

Test Scenarios

  • โ€ข Simple Request: Test basic CORS behavior with GET requests
  • โ€ข Preflight Request: Test preflight requests with PUT/DELETE methods
  • โ€ข Custom Headers: Test requests with Authorization header
  • โ€ข Credentials: Test requests with cookies
  • โ€ข Error Handling: Test failure scenarios

Security Considerations

  • โ€ข Be cautious with wildcard (*) usage due to security risks
  • โ€ข Principle of least privilege: Only allow necessary origins and methods
  • โ€ข Credential restrictions: Only allow specific origins when including credentials
  • โ€ข Regular review: Periodically review and update CORS policies

CORS Debugging Tips

Browser Developer Tools

  • โ€ข Check OPTIONS requests in the Network tab
  • โ€ข Look for CORS error messages in the Console
  • โ€ข Verify CORS headers in Response Headers

Useful Tools

  • โ€ข CORS Tester (this tool)
  • โ€ข Postman (for API testing)
  • โ€ข curl command (for direct server testing)
    CORS Tester