Vue中用Axios发送带认证头GET请求遇Network Error且请求未发送

Hey there, let’s figure out why your Axios GET request is getting stuck with a generic "Network Error" and not even hitting the network—especially since Postman and hurl.it can successfully call the same API. Since you already retrieved a token from the API, the issue is almost certainly related to browser security rules or Axios configuration quirks. Here are the top fixes to try:

1. Fix CORS (Cross-Origin Resource Sharing) Restrictions #

This is the most common culprit. Browsers enforce a same-origin policy, which means your frontend (hosted at http://uralsib-lk.dev) can’t directly call an API at a different domain (http://smev.test-it-studio.ru) unless the API server explicitly allows it via CORS headers.

• Verify: Check your browser’s Network tab for an OPTIONS preflight request (browsers send this automatically for requests with custom headers like Authorization). If the OPTIONS request fails or returns missing Access-Control-* headers, the browser blocks the actual GET request.
• Quick Fix for Development: Use Vue’s built-in dev server proxy to bypass CORS. Add this to your vue.config.js:

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://smev.test-it-studio.ru',
          changeOrigin: true,
          secure: false
        }
      }
    }
  }
  

  Then update your Axios request to use the proxy path instead of the full URL:

  let options = {
    method: 'GET',
    url: '/api/analytics/PortfolioStructure', // No full domain now
    headers: {
      'Authorization': `Bearer ${token}`
    },
  };
  

• Permanent Fix: Ask your backend team to configure CORS on the API server to allow requests from http://uralsib-lk.dev, and specifically whitelist the Authorization header.

2. Clean Up Axios Base URL Configuration #

Looking at your error config, you’ve set a baseURL but also provided a full absolute URL in the url field. When Axios gets an absolute URL, it ignores the baseURL—this isn’t breaking things, but it can lead to confusion. Simplify your code:

// Set baseURL once (maybe in your main.js or a separate Axios config file)
axios.defaults.baseURL = 'http://smev.test-it-studio.ru';

// Then make the request with a relative path
const token = "token";
let options = {
  method: 'GET',
  url: '/api/analytics/PortfolioStructure',
  headers: {
    'Authorization': `Bearer ${token}`
  },
};

3. Check for Content Security Policy (CSP) Blocks #

Your frontend might have a Content Security Policy that restricts which domains it can fetch resources from. If smev.test-it-studio.ru isn’t allowed in the CSP, the browser will block the request entirely (you won’t even see it in the Network tab).

• Verify: Open your browser’s Console tab and look for errors mentioning "Content Security Policy" or "Refused to connect".
• Fix: Update your CSP header to include http://smev.test-it-studio.ru in the connect-src directive.

4. Debug the Request Details #

Add more logging to your catch block to get better insights into what’s happening:

axios(options).then((data) => {
  console.log(data);
}).catch((error) => {
  console.log('Error message:', error.message);
  console.log('Full request object:', error.request); // Shows if the request was sent
  console.log('Request config:', error.config);
});

The error.request object will tell you if the browser actually tried to send the request (if it’s undefined, the browser blocked it before sending).

5. Double-Check Token Format #

Make sure your Authorization header is correctly formatted. Ensure there’s exactly one space between Bearer and the token, and that the token itself doesn’t have extra quotes or whitespace. For example:

// Correct format
'Authorization': `Bearer ${token}`

// Wrong (extra space)
'Authorization': `Bearer  ${token}`

// Wrong (quotes around token)
'Authorization': `Bearer "${token}"`

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