CORS Support

What is CORS?

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers that restricts web pages from making requests to a different domain than the one serving the page. Without proper CORS headers, browsers block these "cross-origin" requests.

APIVerve's servers include the necessary CORS headers in all responses, allowing your frontend JavaScript code to make API calls directly without encountering CORS errors.

CORS Headers

Every APIVerve API response includes the following CORS headers:

Making API Calls from the Browser

You can make direct API calls from JavaScript running in the browser without any special configuration. Here's an example using the Fetch API:

// Direct browser API call - no proxy needed
const response = await fetch('https://api.apiverve.com/v1/currencyconverter?from=USD&to=EUR&amount=100', {
  headers: {
    'x-api-key': 'YOUR_API_KEY'
  }
});

const data = await response.json();
console.log(data);

import { useState, useEffect } from 'react';

function CurrencyConverter() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    async function fetchRate() {
      const response = await fetch(
        'https://api.apiverve.com/v1/currencyconverter?from=USD&to=EUR&amount=100',
        {
          headers: {
            'x-api-key': process.env.NEXT_PUBLIC_APIVERVE_KEY
          }
        }
      );
      const data = await response.json();
      setResult(data);
    }
    fetchRate();
  }, []);

  return <div>{result?.data?.convertedAmount}</div>;
}

Security Considerations

When making API calls from browser-based applications, keep these security best practices in mind. For comprehensive security guidance, see our security best practices page.

• API Key Exposure: API keys used in frontend code are visible to users. Consider using a backend proxy for sensitive operations or use separate API keys for frontend applications with appropriate rate limits.
• Domain Restrictions: You can configure domain restrictions for your API keys in the APIVerve dashboard to limit which domains can use a specific key.
• Rate Limiting: Browser-based applications may generate many requests. Ensure your plan has adequate rate limits for your expected traffic.

Preflight Requests

For certain types of requests (those with custom headers or non-simple methods), browsers send a "preflight" OPTIONS request before the actual request. APIVerve handles these preflight requests automatically.

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 86400

The Access-Control-Max-Age header tells browsers to cache the preflight response for 24 hours, reducing the number of preflight requests for repeated API calls.

Troubleshooting CORS Issues

If you encounter CORS errors, check the following:

• Correct Endpoint: Ensure you're using the correct API endpoint (https://api.apiverve.com/v1/...).
• HTTPS Required: All API calls must use HTTPS. HTTP requests will fail.
• Valid API Key: Ensure your API key is valid and included in thex-api-key header.
• Browser Extensions: Some browser extensions can interfere with CORS. Try disabling extensions if you experience issues.