使用Axios调用Scryfall API请求失败，寻求技术帮助

Hey there, let's break down why your axios request might be failing when Postman and browsers work perfectly. Here are the most likely culprits and actionable fixes:

1. URL Encoding Problems (The #1 Suspect) #

When you directly interpolate args.name into the URL string, any spaces, special characters (like &, #, !, or accented letters) will break the request structure. Postman and browsers automatically encode these characters for you, but JavaScript template strings don’t.

For example, if args.name is "Black Lotus", your URL becomes ...exact=Black Lotus — the space gets interpreted as a separator, turning this into two invalid parameters instead of one.

Fix: #

Use axios’s built-in params option (it handles encoding automatically) instead of string interpolation:

axios.get('https://api.scryfall.com/cards/named', {
  params: {
    exact: args.name
  }
})
.then((res) => {
  console.log(JSON.stringify(res));
})
.catch((err) => {
  // Updated error handling below
})

Alternatively, manually encode the parameter value with encodeURIComponent() if you prefer string interpolation:

axios.get(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(args.name)}`)

2. Incomplete Error Handling (You’re Missing Critical Details) #

Your current catch block only checks for err.response, but there are other error scenarios that can happen:

• Network errors (request sent, but no response received)
• Request setup errors (invalid config, typos in the URL)

Without logging these details, you’re flying blind.

Fix: #

Expand your error handling to log specific issues:

.catch((err) => {
  if (err.response) {
    // Server returned a non-2xx status code
    console.error('API Error Status:', err.response.status);
    console.error('API Error Data:', err.response.data);
    throw new Error(`Card with name (${args.name}) not found!`);
  } else if (err.request) {
    // Request was sent but no response came back
    console.error('No response from API:', err.request);
    throw new Error('Failed to connect to Scryfall API!');
  } else {
    // Error occurred while setting up the request
    console.error('Request Setup Error:', err.message);
    throw new Error(`Query failed: ${err.message}`);
  }
})

This will print exact error details to your console, making it way easier to diagnose the problem.

3. CORS Restrictions (If Running in a Browser) #

If your code is running in a browser environment (like React/Vue), you might hit CORS limitations. Postman isn’t bound by browser CORS policies, so it works even if the browser blocks the request.

Scryfall’s API should support CORS, but double-check your browser’s console for CORS-related error messages. If you see them, you can:

• Use a development proxy (e.g., Create React App’s proxy config) to route requests through your backend
• Ensure you’re not adding any custom headers that the API doesn’t allow

4. Strict Exact Match Requirements #

Scryfall’s exact parameter is case-sensitive and requires perfect matching of punctuation and special characters. Double-check that args.name matches exactly what you used in Postman — even a missing accent mark or wrong capitalization could cause a 404.

Start with fixing the URL encoding and expanding error logging — those two steps will almost certainly reveal the root cause.

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