Mac本地React项目跨设备访问遭遇CORS跨域请求阻塞问题咨询

Hey there, let's break down this CORS issue you're facing. I've seen this exact error a few times, so here's what's going on and how to fix it:

The error message tells us that when the other laptop's browser sends a preflight OPTIONS request to http://www.shadyab.com/api/Api/coupons, the server's response is missing proper CORS configuration. Specifically, either the Access-Control-Allow-Origin header isn't set correctly, or the Access-Control-Allow-Headers list doesn't include headers your frontend is sending.

Preflight requests kick in automatically when your frontend sends non-"simple" requests (like using Content-Type: application/json, or adding custom headers such as Authorization). The browser checks if the server allows the request before sending the actual GET/POST.

1. 前端开发环境快速修复（无需修改后端） #

If you're in development mode, the easiest fix is to use React's built-in proxy to bypass CORS entirely:

• Open your React project's package.json file
• Add a top-level "proxy" field pointing to your API base URL:

  {
    "name": "your-react-app",
    "version": "0.1.0",
    "proxy": "http://www.shadyab.com",
    // ... rest of your package.json content
  }
  

• Restart your React dev server (npm start or yarn start)
• Update your frontend request to use a relative path instead of the full URL:

  // Replace this:
  // fetch('http://www.shadyab.com/api/Api/coupons', requestOptions)
  // With this:
  fetch('/api/Api/coupons', requestOptions)
  

This works because the React dev server will proxy your requests to the API, making them appear to come from the same origin to the browser.

2. 后端CORS配置修复（长期解决方案） #

If you control the www.shadyab.com server, fix its CORS headers to allow requests from your React app's origin:

• Set Access-Control-Allow-Origin: For development, you can use * (not recommended for production), or specify your React app's public URL directly (e.g., http://192.168.1.101:3000).
• Handle OPTIONS requests: Ensure the server responds to OPTIONS preflight requests with the correct CORS headers instead of blocking them.
• Include required headers in Access-Control-Allow-Headers: Check your requestOptions—if you're sending custom headers like Content-Type or Authorization, add them to this header list. Also, double-check that your frontend isn't accidentally sending access-control-allow-origin as a request header (that's a response header, not something the frontend should include).

3. Audit your requestOptions #

Take a close look at your const requestOptions = { ... } object. Make sure you're not mistakenly adding access-control-allow-origin as a request header—this is a common mistake that triggers this exact error. For example, remove any line like this:

const requestOptions = {
  method: 'GET',
  headers: {
    'access-control-allow-origin': '*', // ❌ Remove this line!
    'Content-Type': 'application/json'
  }
};

• For production, never use Access-Control-Allow-Origin: * if your API handles sensitive data—always specify exact allowed origins.
• If you don't control the backend, the proxy method (solution 1) is your best bet for development, or you'll need to ask the API maintainers to adjust their CORS settings.

内容的提问来源于stack exchange，提问作者S.M_Emamian