Vue.js2调用PrestaShop API时请求返回200却报网络错误

这种明明请求返回200状态码且包含目标数据，但仍抛出网络错误的情况，我之前也碰到过，大概率和跨域（CORS）限制或者axios的响应解析逻辑有关，咱们一步步来定位解决：

1. 先排查跨域（CORS）问题 #

虽然请求返回了200，但浏览器的CORS安全机制可能还是拦截了响应。你可以按以下步骤检查：

• 打开Firefox控制台的「网络」标签，找到这个API请求
• 切换到「响应头」面板，查看是否存在 Access-Control-Allow-Origin 字段：
  • 如果没有这个字段，或者字段值不包含你的前端页面域名（比如本地开发的http://localhost:8080），那就是跨域问题导致的浏览器拦截。

跨域问题的解决方法： #

• 线上环境：在PrestaShop的服务器配置（Apache/Nginx）中添加CORS响应头，允许你的前端域名访问。比如Nginx里可以加：

  add_header Access-Control-Allow-Origin "你的前端域名";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
  

• 本地开发：在Vue项目的vue.config.js中配置代理，把API请求转发到PrestaShop站点，绕过浏览器的跨域检查：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://myprestashopsite.com',
          changeOrigin: true,
          pathRewrite: {}
        }
      }
    }
  }
  

  之后把请求URL改成/api/categories/?ws_key=xxx&filter[id_parent]=5&output_format=JSON即可。

2. 检查axios的响应解析是否出错 #

如果CORS没问题，那很可能是PrestaShop返回的JSON格式不符合axios的默认解析要求。PrestaShop的API有时候会返回带安全前缀的JSON，比如/*-secure-*/{"categories": [...]}，这种格式axios默认会解析失败，哪怕状态码是200。

解决方法：手动处理响应数据 #

修改你的axios请求代码，先去掉前缀再解析JSON：

import axios from 'axios'
export default {
  data () {
    return {
      get: [],
      errors: []
    }
  },
  created () {
    axios({
      method: 'get',
      url: 'https://myprestashopsite.com/api/categories/?ws_key=J***************Z&filter[id_parent]=5&output_format=JSON',
      responseType: 'text' // 先以文本形式获取响应，避免自动解析出错
    }).then(response => {
      // 去掉可能的安全前缀，再解析成JSON
      const cleanData = response.data.replace(/^\/\*-secure-\*\/(.*)$/, '$1')
      this.get = JSON.parse(cleanData)
    })
    .catch(e => {
      // 打印详细错误信息，方便定位问题
      console.error('请求错误详情:', e.message, e.response)
      this.errors.push(e)
    })
  }
}

3. 额外排查技巧 #

在catch回调里打印完整的错误对象（比如console.log(e)），你能看到更具体的错误原因——是解析错误、CORS错误还是其他问题，这会帮你更快定位根源。

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