使用Vue Axios访问Steam API时遭遇CORS问题求助

Hey there! Let's work through these two tricky issues you're hitting while trying to pull CSGO data from the Steam API in Vue—we'll get this sorted out step by step.

First: Fix the 405 (Method Not Allowed) Error #

This error tells you you're using the wrong HTTP method for the Steam API endpoint you're calling. Here's how to fix it fast:

• Double-check your request method: Almost all Steam API endpoints use GET requests. If you accidentally used POST, PUT, or DELETE, switch to GET (for example, in Axios, use axios.get() instead of axios.post()).
• Verify the API endpoint URL: Make sure you didn't mistype the path, query parameters, or CSGO's app ID (it's 730, and it's required for most CSGO-related endpoints).

Second: Resolve the CORS Access Denied Issue #

Steam's API doesn't allow direct frontend requests from browsers—that's why you're seeing the missing Access-Control-Allow-Origin header. Online proxies often fail here because Steam may block them or they don't handle the request correctly. Here are the reliable solutions:

1. Build Your Own Backend Proxy (Recommended for Production) #

Create a simple server-side middleware to act as a go-between for your Vue app and the Steam API. Server-to-server requests don't have CORS restrictions. Here's a quick Node.js/Express example:

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3001;

// Proxy endpoint for CSGO data
app.get('/api/csgo-stats', async (req, res) => {
  try {
    // Replace with your target Steam API URL (include your API key!)
    const steamApiUrl = 'https://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=YOUR_STEAM_API_KEY&steamid=TARGET_STEAM_ID';
    const response = await axios.get(steamApiUrl);
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: 'Failed to fetch data' });
  }
});

app.listen(PORT, () => console.log(`Proxy running on http://localhost:${PORT}`));

Then in your Vue component, request your proxy instead of the Steam API directly:

// Vue component code
async fetchCSGOData() {
  try {
    const response = await axios.get('http://localhost:3001/api/csgo-stats');
    console.log('CSGO Data:', response.data);
  } catch (err) {
    console.error('Error:', err);
  }
}

2. Use Vue's Development Proxy (For Local Testing Only) #

If you're just working locally, you can configure Vue's dev server to proxy requests automatically. Create or update vue.config.js in your project root:

module.exports = {
  devServer: {
    proxy: {
      '/steam-api': {
        target: 'https://api.steampowered.com',
        changeOrigin: true,
        pathRewrite: { '^/steam-api': '' } // Strip the prefix when forwarding to Steam
      }
    }
  }
};

Now you can make requests in Vue like this (the dev server will forward it to Steam):

await axios.get('/steam-api/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=YOUR_KEY&steamid=USER_ID');

Quick Reminders #

• Don't forget to include your Steam API Key in all requests (you can get one from Steam's official developer platform).
• Keep an eye on Steam's API rate limits to avoid getting your key temporarily blocked.
• Always test the Steam API endpoint directly in your browser first (with your key) to confirm it works before integrating it into your Vue app.

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