Tools

View all tools →

Causes of CORS Errors in Local Development and 3 Workarounds

CORS Frontend Troubleshooting Development
Conclusion

Different port numbers are treated as “different origins”. Bypass this by returning headers on the backend, or using a proxy on the frontend.

Why Errors Occur Between Localhosts

Due to the browser’s Same-Origin Policy, if the protocol, domain, or port number don’t match exactly, the request is treated as cross-origin.

Frontend API Server
http://localhost:3000 http://localhost:8080
Port 3000 Port 8080 -> Different Origin
Common Misconception

Postman or curl will not produce CORS errors. CORS is a security restriction specific to web browsers.

Workaround 1: Allow CORS on the Backend (The Right Way)

// Express Example
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000'
}));

Workaround 2: Use Frontend Proxy (If Backend Cannot Be Modified)

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
});

Now, by requesting a relative path like fetch('/api/users'), you can avoid CORS errors.

You can use browser extensions to disable CORS for testing purposes only. Never use this solution in production environments.

Summary

The proper way to solve CORS errors is by configuring the server. If backend access is restricted, utilize a development proxy.

🧪 Check API Responses with JSON Formatter

Easily format and check your API responses.

試す