代理请求： Request failed with status code 404

HTTP状态码—请求错误

400 Bad Request
1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。
2、请求参数有误。
401 Unauthorized
当前请求需要用户验证。
402 Payment Required
该状态码是为了将来可能的需求而预留的。
403 Forbidden
服务器已经理解请求，但是拒绝执行它。
404 Not Found
请求失败，请求所希望得到的资源未被在服务器上发现

第一中可能：React中将你安装的proxy 或者是 createProxyMiddleware重新安装一遍可能是因为版本过低的原因重新 npm

vue中出现这种错误：

网上找了很多例子，都无法解决这个问题，无意中看到一篇文章，原来是与mock冲突，在main.js中将mock注释掉即可。

在公司后台还没有开发完成的情况下，前端使用json-sever搭建mock服务器，模拟本地json数据。具体步骤参照具体看此文章，文章写得很好很详细，根据文章步骤即可。

另一种原因：

用postman调接口有正确的返回值，与后台无关；肯定是前端配置问题；找了好几个小时。

1.main.js中使用到mock的信息注释掉，因为axios与mock会有冲突

 // import { mockXHR } from '../mock'
 
// if (process.env.NODE_ENV === 'production') {
 
// mockXHR()
 
// }

2.config下面的index.js中设置proxy代理的代码片段,设置之后要重新npm run dev,webstorm的自动重启不起作用

我的原因就是应为没有重启，/(ㄒoㄒ)/~~

在proxy模块中设置了‘/xxf’，target中设置服务器地址+端口号，然后我们在调用接口的时候，就可以全局使用‘/xxf’，这时候‘/xxf’的作用就相当于一个唯一标识，比如接口地址是 http://192.168.106.8:8888/xxf/deptList，那我们在调用接口时可以直接写为/xxf/deptList，系统会自动识别proxy中/xxf标识中的target地址并拼接在一起。

那pathRewrite是用来干嘛的呢，这里的作用，相当于是替换‘/xxf’，如果接口中没有/xxf，那就直接置空，{‘^/xxf’:‘’}，置空后真实的地址就变成了 http://192.168.106.8:8888/xxf/deptList，与真实接口不一致，这就会导致了接口错误，报错404；

如果接口中有/xxf，那就得写成{‘^/xxf’:‘/xxf’}，可以理解为一个替换路径、重写路径或者重定向的功能。

或者不设置pathRewrite参数

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
 
const path = require('path')
 
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/xxf':{
         //target: 'https://home.rootensoft.com/api/',
         target: 'http://localhost:8888',
        secure: true,
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {   //路径重置
          '^/xxf': '/xxf'
        }
      }
    },
 
    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 8889, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
    useEslint: false,
    showEslintErrorsInOverlay: false,
 
    devtool: 'cheap-module-eval-source-map',
 
    cacheBusting: true,
 
    cssSourceMap: true
  },
 
  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
 
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
 
    productionSourceMap: true,
    devtool: '#source-map',
 
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
 
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

代理请求： Request failed with status code 404

HTTP状态码—请求错误

Guess you like