Understanding Cross-Origin Resource Sharing (CORS): Problems and Solutions

2025-05-15 2025-05-30 Web Development Web Development

If you’ve ever built a modern web application, you’ve likely encountered the infamous “Access to fetch at ‘https://api.example.com‘ from origin ‘https://myapp.com‘ has been blocked by CORS policy” error. This comprehensive guide explains what cross-origin issues are, why they exist, and how to solve them effectively.

What is Cross-Origin Resource Sharing (CORS)?

CORS is a security mechanism built into web browsers that restricts web pages from making requests to a domain different from the one that served the original page. In simpler terms, it prevents your JavaScript code running on website A from freely accessing resources on website B.

The Same-Origin Policy

The foundation of CORS is the Same-Origin Policy (SOP), a critical security concept that restricts how documents or scripts from one origin can interact with resources from another origin. An “origin” is defined by the combination of:

  • Protocol (http, https)
  • Domain (example.com)
  • Port (80, 443, 3000, etc.)

For example, https://myapp.com and https://api.myapp.com are considered different origins because their domains differ, even though they share the same protocol.

Why Do We Need CORS?

CORS exists for security reasons. Without these restrictions, malicious websites could:

  1. Access private data: A malicious site could read your emails if you’re logged into your email in another tab
  2. Perform unauthorized actions: Execute transactions on your banking site while you’re logged in
  3. Steal sensitive information: Extract authentication tokens or cookies

Here’s a simple diagram illustrating the problem:

1
2
3
4
5
6
7
8
┌─────────────────┐         ┌─────────────────┐
│                 │ Request │                 │
│ evil.com        │──────────│ yourbank.com    │
│ (Attacker site) │         │ (Your bank site)│
│                 │ Without │                 │
└─────────────────┘  CORS   └─────────────────┘
                     ↓
           User's private data exposed

How CORS Works

When your browser makes a cross-origin request:

  1. The browser automatically adds an Origin header to the request
  2. The server checks this header and decides whether to allow the request
  3. If allowed, the server responds with specific CORS headers
  4. The browser checks these headers before making the response available to your code

Here’s a diagram illustrating the CORS process flow, including the preflight mechanism:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
┌─────────────┐                                  ┌─────────────┐
│             │                                  │             │
│  Browser    │                                  │   Server    │
│             │                                  │             │
└─────┬───────┘                                  └─────┬───────┘
      │                                                │
      │  1. Preflight Request (OPTIONS)                │
      │  Origin: https://myapp.com                     │
      │  Access-Control-Request-Method: POST           │
      │  Access-Control-Request-Headers: Content-Type  │
      │ ───────────────────────────────────────────>  │
      │                                                │
      │  2. Preflight Response                         │
      │  Access-Control-Allow-Origin: https://myapp.com│
      │  Access-Control-Allow-Methods: GET, POST       │
      │  Access-Control-Allow-Headers: Content-Type    │
      │  Access-Control-Max-Age: 86400                 │
      │ <───────────────────────────────────────────  │
      │                                                │
      │  3. Actual Request (POST)                      │
      │  Origin: https://myapp.com                     │
      │  Content-Type: application/json                │
      │ ───────────────────────────────────────────>  │
      │                                                │
      │  4. Actual Response                            │
      │  Access-Control-Allow-Origin: https://myapp.com│
      │  Content-Type: application/json                │
      │ <───────────────────────────────────────────  │
      │                                                │
┌─────┴───────┐                                  ┌─────┴───────┐
│             │                                  │             │
│  Browser    │                                  │   Server    │
│             │                                  │             │
└─────────────┘                                  └─────────────┘

For simple requests (without preflight), steps 1 and 2 are skipped.

Key CORS Headers

  • Access-Control-Allow-Origin: Specifies which origins can access the resource
  • Access-Control-Allow-Methods: Indicates which HTTP methods are allowed
  • Access-Control-Allow-Headers: Lists which headers can be used
  • Access-Control-Allow-Credentials: Specifies if the request can include credentials (cookies, authentication)
  • Access-Control-Expose-Headers: Indicates which response headers should be exposed to the client

Common CORS Scenarios and Solutions

1. Simple Requests

Some requests don’t trigger a preflight check. These “simple requests” meet all of the following conditions:

  • Use only GET, HEAD, or POST methods
  • Only include standard headers
  • If using POST, only use certain content types
  • No event listeners on upload objects
  • No ReadableStream objects

For simple requests, the server only needs to include the appropriate Access-Control-Allow-Origin header:

1
Access-Control-Allow-Origin: https://myapp.com

Or to allow any origin (not recommended for production):

1
Access-Control-Allow-Origin: *

2. Preflight Requests

For more complex requests, browsers send a “preflight” OPTIONS request to check if the actual request is allowed. This happens when:

  • Using methods other than GET, POST, or HEAD
  • Using custom headers
  • Using content types other than application/x-www-form-urlencoded, multipart/form-data, or text/plain

Here’s what a preflight exchange looks like:

  1. Browser sends OPTIONS request:

    1
    2
    3
    4
    5
    OPTIONS /api/data HTTP/1.1
    Host: api.example.com
    Origin: https://myapp.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: Content-Type, Authorization

  2. Server responds with permissions:

    1
    2
    3
    4
    5
    HTTP/1.1 204 No Content
    Access-Control-Allow-Origin: https://myapp.com
    Access-Control-Allow-Methods: GET, POST, PUT, DELETE
    Access-Control-Allow-Headers: Content-Type, Authorization
    Access-Control-Max-Age: 86400

  3. If approved, the browser proceeds with the actual request

Implementing CORS Solutions

Let’s look at how to implement CORS solutions in different environments:

Backend Solutions

Node.js with Express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const express = require('express');
const cors = require('cors');
const app = express();

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

// Or with specific options
app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

// Enable CORS for a specific route only
app.get('/api/public-data', cors(), (req, res) => {
  res.json({ message: 'This is public data' });
});

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

Python with Flask

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# Enable CORS for all routes
CORS(app)

# Or with specific options
CORS(app, resources={
    r"/api/*": {
        "origins": "https://myapp.com",
        "methods": ["GET", "POST", "PUT", "DELETE"],
        "allow_headers": ["Content-Type", "Authorization"]
    }
})

@app.route('/api/data')
def get_data():
    return {"message": "Data accessed successfully"}

if __name__ == '__main__':
    app.run(port=5000)

Go with Gin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package main

import (
	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
	"time"
)

func main() {
	router := gin.Default()

	// Enable CORS for all routes
	router.Use(cors.Default())

	// Or with specific options
	config := cors.Config{
		AllowOrigins:     []string{"https://myapp.com"},
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE"},
		AllowHeaders:     []string{"Content-Type", "Authorization"},
		AllowCredentials: true,
		MaxAge:           12 * time.Hour,
	}
	router.Use(cors.New(config))

	// API route
	router.GET("/api/data", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "Data accessed successfully",
		})
	})

	router.Run(":8080")
}

Frontend Solutions

Making Cross-Origin Requests with Fetch API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Simple GET request
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Request with credentials (cookies)
fetch('https://api.example.com/user-data', {
  method: 'GET',
  credentials: 'include', // Sends cookies
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Using Axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import axios from 'axios';

// Configure Axios for all requests
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.withCredentials = true; // Include credentials

// Make a request
axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

// With more options
axios.post('/submit-data', 
  { name: 'John', email: 'john@example.com' },
  { 
    headers: { 'Authorization': 'Bearer token123' }
  }
)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Proxying Requests

If you can’t modify the server’s CORS policy, you can use a proxy:

Development Proxy

For React apps (in package.json):

1
2
3
4
5
{
  "name": "my-app",
  "version": "0.1.0",
  "proxy": "https://api.example.com"
}

Then in your code:

1
2
// This will be proxied to https://api.example.com/data
fetch('/data').then(/*...*/);

Production Proxy

Set up a server-side proxy with Nginx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    listen 80;
    server_name myapp.com;
    
    location /api/ {
        proxy_pass https://api.example.com/;
        proxy_set_header Host api.example.com;
        proxy_set_header Origin https://api.example.com;
    }
    
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }
}

CORS in Action: Complete Example

Let’s create a complete example with both frontend and backend code to demonstrate CORS in action:

Backend (Node.js/Express)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// server.js
const express = require('express');
const cors = require('cors');
const app = express();

// CORS middleware configuration
app.use(cors({
  origin: 'http://localhost:8080', // Your frontend URL
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

app.use(express.json());

// A protected resource endpoint
app.get('/api/protected-data', (req, res) => {
  res.json({ 
    message: 'This is protected data',
    timestamp: new Date().toISOString()
  });
});

// Start server
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Frontend (HTML/JavaScript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CORS Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .result {
      padding: 15px;
      background-color: #f0f0f0;
      border-radius: 5px;
      margin-top: 20px;
    }
    button {
      padding: 10px 15px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>CORS Demo</h1>
  <p>This page demonstrates cross-origin requests.</p>
  
  <button id="fetchData">Fetch Protected Data</button>
  <div id="result" class="result">Results will appear here...</div>

  <script>
    document.getElementById('fetchData').addEventListener('click', async () => {
      const resultDiv = document.getElementById('result');
      resultDiv.textContent = 'Fetching data...';
      
      try {
        // This is a cross-origin request
        const response = await fetch('http://localhost:3000/api/protected-data', {
          method: 'GET',
          credentials: 'include', // Include cookies if needed
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        
        const data = await response.json();
        resultDiv.innerHTML = `
          <p><strong>Success!</strong> Data received:</p>
          <pre>${JSON.stringify(data, null, 2)}</pre>
        `;
      } catch (error) {
        resultDiv.innerHTML = `
          <p><strong>Error:</strong> ${error.message}</p>
          <p>This might be a CORS error. Check the console for details.</p>
        `;
        console.error('Fetch error:', error);
      }
    });
  </script>
</body>
</html>

Running the Example

  1. Save the server code as server.js and run with node server.js
  2. Save the HTML file as index.html and open it with a web server (e.g., python -m http.server 8080)
  3. Click the “Fetch Protected Data” button and observe the results

If everything is configured correctly, you’ll see the protected data displayed. If the CORS headers are incorrect or missing, you’ll see an error in the console.

Diagnosing CORS Issues

When troubleshooting CORS problems:

  1. Check browser console: Look for detailed error messages
  2. Examine network requests: Use browser DevTools to inspect headers
  3. Verify server configuration: Ensure CORS headers are being sent properly
  4. Test with simple requests first: Start with GET requests before more complex operations

Visual Guide to CORS Debugging

When faced with CORS errors, follow this visual debugging workflow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
┌─────────────────────┐
│ CORS Error Detected │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐     ┌─────────────────────────────────┐
│ Check Browser       │     │ Look for error messages like:    │
│ Console Errors      │────►│ "Access to fetch at... has been  │
└──────────┬──────────┘     │ blocked by CORS policy"          │
           │                └─────────────────────────────────┘
           ▼
┌─────────────────────┐     ┌─────────────────────────────────┐
│ Inspect Network     │     │ Check for:                       │
│ Requests & Headers  │────►│ - OPTIONS preflight requests     │
└──────────┬──────────┘     │ - Missing CORS response headers  │
           │                └─────────────────────────────────┘
           ▼
┌─────────────────────┐
│ Is this a Simple or │     ┌─────────────────────────────────┐
│ Preflighted Request?│─────┤ Simple: GET/HEAD/POST with      │
└──────────┬──────────┘   │ │ standard content types           │
           │              │ └─────────────────────────────────┘
           │              │
           │              │ ┌─────────────────────────────────┐
           │              └─┤ Preflighted: Custom headers,     │
           │                │ non-simple methods/content types │
           │                └─────────────────────────────────┘
           ▼
┌─────────────────────┐
│ Verify Server-Side  │
│ CORS Configuration  │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────────────────────────────────────────────┐
│ Solutions:                                                   │
│ 1. Configure server with proper CORS headers                 │
│ 2. Set up a proxy on your domain                             │
│ 3. Use development server with CORS proxy                    │
│ 4. Modify request to be a "simple request" if possible       │
└─────────────────────────────────────────────────────────────┘

Here’s what a typical CORS error looks like in the browser console:

1
2
3
4
Access to fetch 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. If an opaque response serves your needs, set the request's 
mode to 'no-cors' to fetch the resource with CORS disabled.

This visual error pattern is your clue to check the server’s CORS configuration.

Security Considerations

While implementing CORS, keep these security best practices in mind:

  1. Don’t use wildcard origins in production: Instead of Access-Control-Allow-Origin: *, specify exact domains
  2. Be careful with credentials: Only enable Access-Control-Allow-Credentials: true if necessary
  3. Limit exposed methods: Only allow the HTTP methods your API actually needs
  4. Set reasonable max-age: Don’t cache preflight responses for too long
  5. Consider additional security measures: CORS is just one layer; also implement proper authentication and authorization

Conclusion

Cross-origin resource sharing is a fundamental security feature of modern browsers that protects users from malicious websites. While CORS errors can be frustrating, they serve an important purpose in maintaining web security.

By understanding how CORS works and implementing proper configurations on both the frontend and backend, you can build web applications that communicate safely across different domains while maintaining security.

Remember that the most secure approach depends on your specific requirements – sometimes a proxy is best, while other times configuring proper CORS headers is the way to go. The key is understanding the security implications of your choices.

What CORS challenges have you faced in your projects? Share your experiences in the comments!

版权声明
作者: xawei
post.copyright.created_at: 2025-05-15
post.copyright.updated_at: 2025-05-30
链接: https://xawei.xyz/2025/05/15/understanding-cross-origin-resource-sharing/
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。
post.tags:
# Web Development
Mastering Go Again: A Refresher for Developers with Prior Experience
目录
  1. What is Cross-Origin Resource Sharing (CORS)?
    1. The Same-Origin Policy
  2. Why Do We Need CORS?
  3. How CORS Works
    1. Key CORS Headers
  4. Common CORS Scenarios and Solutions
    1. 1. Simple Requests
    2. 2. Preflight Requests
  5. Implementing CORS Solutions
    1. Backend Solutions
      1. Node.js with Express
      2. Python with Flask
      3. Go with Gin
    2. Frontend Solutions
      1. Making Cross-Origin Requests with Fetch API
      2. Using Axios
  6. Proxying Requests
    1. Development Proxy
    2. Production Proxy
  7. CORS in Action: Complete Example
    1. Backend (Node.js/Express)
    2. Frontend (HTML/JavaScript)
    3. Running the Example
  8. Diagnosing CORS Issues
  9. Visual Guide to CORS Debugging
  10. Security Considerations
  11. Conclusion