React本地环境调用Monetizze Token API遭跨域请求拦截问题咨询

Hey there! Let's break down why you're hitting that frustrating CORS error and how to fix it properly.

Why This Error Happens #

That "Cross-Origin Request Blocked" message is the browser enforcing the Same-Origin Policy — it prevents frontend code from making requests to a different domain (in this case, api.monetizze.com.br) unless the target server explicitly allows it via CORS headers. It looks like Monetizze's API isn't configured to accept direct requests from your React app's domain, which is common for APIs that require sensitive credentials like X_CONSUMER_KEY (more on that security note later!).

Solutions to Fix the CORS Issue #

1. Use React's Built-in Proxy (Quick Fix for Development)

React has a built-in proxy feature that lets you forward requests from your local dev server to the target API, bypassing CORS checks. Here's how to set it up:

• Open your package.json file and add this line at the top level:

  "proxy": "https://api.monetizze.com.br"
  

• Update your Axios request to use a relative path instead of the full URL:

  axios.request('/2.1/token', {
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'X_CONSUMER_KEY': 'your-key-here'
    }
  })
  

Restart your React dev server, and the proxy will forward the request to Monetizze's API on your behalf, avoiding the CORS error.

2. Create a Backend Proxy Server (Best for Production)

The above proxy is great for development, but in production, you shouldn't expose your X_CONSUMER_KEY directly in frontend code — anyone can inspect your app's network requests and steal it. Instead, set up a simple backend server to act as a middleman:

For example, using Node.js + Express:

• First, create a new Express endpoint that calls Monetizze's API:

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  app.get('/api/get-monetizze-token', async (req, res) => {
    try {
      const response = await axios.request('https://api.monetizze.com.br/2.1/token', {
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X_CONSUMER_KEY': 'your-secure-key-here' // Store this in environment variables!
        }
      });
      res.json(response.data);
    } catch (error) {
      res.status(error.response.status).json(error.response.data);
    }
  });
  
  app.listen(3001, () => console.log('Proxy server running on port 3001'));
  

• Then, in your React app, request your own backend instead:

  axios.request('http://localhost:3001/api/get-monetizze-token')
    .then(response => {
      // Use the token from response.data
    })
    .catch(error => {
      // Handle error
    });
  

Make sure to store your X_CONSUMER_KEY in environment variables (like a .env file) on the backend to keep it secure.

3. Check Monetizze's API Documentation

Double-check Monetizze's API docs to see if they offer a frontend-friendly way to authenticate, like OAuth with a client ID that's safe to expose. But from what you've shared, this API is likely intended for server-side use, so the backend proxy is the most secure approach.

Critical Security Note #

Never hardcode or expose your X_CONSUMER_KEY in frontend code. Anyone can view it via browser dev tools, which puts your account at risk. Always keep sensitive credentials on the server side.

内容的提问来源于stack exchange，提问作者Wolgan Ens