vue2项目里接口请求报错，把接口放到浏览器里面正常

Question

vue2项目里接口请求报错，把接口放到浏览器里面正常，是哪里配置错误异常了么

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

根据您的描述，您在Vue 2项目中遇到接口请求报错，但直接在浏览器访问该接口时一切正常。这种情况通常与以下几个方面有关：

CORS (跨域资源共享)

当您的前端应用（运行在localhost:9988）尝试访问另一个域名下的API时，会受到浏览器的同源策略限制。如果后端没有正确配置CORS头，浏览器将阻止这种跨域请求。尽管直接在浏览器地址栏访问API可能不受同源策略影响，因为那种情况下不涉及Ajax请求。

解决方案：

确保后端服务器（API提供方）设置了适当的CORS头。例如，在Node.js的Express服务器中，可以通过安装并使用cors中间件来实现：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 允许所有来源的请求
// 或者更具体地设置允许的源：
// app.use(cors({ origin: 'http://localhost:9988' }));

// 其他路由和中间件配置...

XMLHttpRequest 或 Fetch API 的配置

如果您在Vue项目中使用的是axios、fetch或其他HTTP客户端，确保请求的配置没有问题。比如，某些情况下如果请求需要携带特定的Header，而这些Header不在预检请求（OPTIONS请求）的允许列表中，也会失败。

前端请求的BaseURL或路径问题

确认Vue项目中请求的URL是否正确。有时候，本地开发环境的代理配置不当也会导致请求失败。

Vue CLI代理配置示例：

如果你使用Vue CLI，可以在vue.config.js文件中配置代理，以绕过浏览器的同源策略限制：

module.exports = {
  devServer: {
    proxy: {
      '/dev': {
        target: 'http://localhost:9988', // 目标服务器地址
        changeOrigin: true, // 是否改变源
        pathRewrite: { '^/dev': '' } // 路径重写规则
      },
    },
  },
};

查看错误详情

检查控制台的错误信息，通常会给出具体是CORS、404还是其他类型的错误，这有助于定位问题。

完整代码示例 - Axios请求

确保您的请求代码类似这样，且没有逻辑错误：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:9988'; // 如果需要，可以在这里设置基础URL

axios.get('/dev/demo/accessDeny')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求发生错误:', error);
  });

如果以上步骤都已检查并正确配置，但问题仍然存在，建议详细检查开发者工具中的网络请求详情，查看请求与响应头，进一步排查问题所在。