Vue-element-admin: xhr.js:160 POST http://localhost:9527/dev-api/user/login 405 (Method Not Allowed)

Created on 31 Dec 2019 · 12Comments · Source: PanJiaChen/vue-element-admin

Bug report（问题描述）

点击登录报405错

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

Your OS:
Node.js version:
vue-element-admin version:

dependencies enhancement

Source

liujun0915

Most helpful comment

解决方案:
第一步:
vue.config.js中去掉代理:

devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        // proxy: {
        //  // change xxx-api/login => mock/login
        //  // detail: https://cli.vuejs.org/config/#devserver-proxy
        //  [process.env.VUE_APP_BASE_API]: {
        //      target: `http://localhost:${port}/mock`,
        //      changeOrigin: true,
        //      pathRewrite: {
        //          ['^' + process.env.VUE_APP_BASE_API]: ''
        //      }
        //  }
        // },
        before: require('./mock/mock-server.js')
    }```
以上将after替换成before,亲测after里面直接用app.post定义方法不行只能在before中定义才有效
第二步:
修改mock文件夹下的responseFake方法如下:

``` javascript
// for mock server
const responseFake = (url, type, respond) => {
    return {
        url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
        type: type || 'get',
        response(req, res) {
            console.log('request invoke:' + req.path);
            res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond));
        }
    };
};

并不是dev-server不支持post方法

yunhuduan on 31 Dec 2019

👍13

All 12 comments

是否端口被占用？

PanJiaChen on 31 Dec 2019

这个问题我搞明白是怎么回事了，但是目前找不到简便又好用的解决方案。

因为这 4.0新方案里引入了一个mock-server 来做本地服务端数据返回。但这个server本质还是使用的vue-cli-service, 也即 webpack-dev-server，然而 webpack-dev-server是不支持 post 请求的，所以就会报 405 错误。

目前找到的解决方案就是把 post请求拦截下楼，然后转换成get请求。但是post参数传递是个问题，另外 @/api 中默认的那些接口都需要修改。

还有个办法：修改 main.js
import { mockXHR } from '../mock' if (process.env.NODE_ENV === 'development') { mockXHR() }

但是这样就没办法看到网络请求了。。。

smvv21 on 31 Dec 2019

Hi @smvv21 / Anyone,

Kindlyexplain in english i am also facing same issue while login

FYI:-

gsivaprabu on 31 Dec 2019

解决方案:
第一步:
vue.config.js中去掉代理:

devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        // proxy: {
        //  // change xxx-api/login => mock/login
        //  // detail: https://cli.vuejs.org/config/#devserver-proxy
        //  [process.env.VUE_APP_BASE_API]: {
        //      target: `http://localhost:${port}/mock`,
        //      changeOrigin: true,
        //      pathRewrite: {
        //          ['^' + process.env.VUE_APP_BASE_API]: ''
        //      }
        //  }
        // },
        before: require('./mock/mock-server.js')
    }```
以上将after替换成before,亲测after里面直接用app.post定义方法不行只能在before中定义才有效
第二步:
修改mock文件夹下的responseFake方法如下:

``` javascript
// for mock server
const responseFake = (url, type, respond) => {
    return {
        url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
        type: type || 'get',
        response(req, res) {
            console.log('request invoke:' + req.path);
            res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond));
        }
    };
};

并不是dev-server不支持post方法

yunhuduan on 31 Dec 2019

👍13

Hi @smvv21 / Anyone,

Kindlyexplain in english i am also facing same issue while login

FYI:-

comment src/main.js line 31 and 33
more info please read the comment in the main.js

Alfxjx on 1 Jan 2020

Hi @smvv21 / Anyone,
Kindlyexplain in english i am also facing same issue while login
FYI:-

comment src/main.js line 31 and 33
more info please read the comment in the main.js

Thank you @Alfxjx

gsivaprabu on 1 Jan 2020

😄1

For those looking for translated explanation.

Step 1: Open vue.config.js and comment out the proxy configuration.
Step 2: Replace after with before, so devServer should look like this:

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // proxy: {
    //   // change xxx-api/login => mock/login
    //   // detail: https://cli.vuejs.org/config/#devserver-proxy
    //   [process.env.VUE_APP_BASE_API]: {
    //     target: `http://127.0.0.1:${port}/mocks`,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       ['^' + process.env.VUE_APP_BASE_API]: ''
    //     }
    //   }
    // },
    before: require('./mock/mock-server.js')
  },

Step 3: Go to mock folder index.js file and replace url for responseFake with:

const responseFake = (url, type, respond) => {
    return {
        url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
        type: type || 'get',
        response(req, res) {
            console.log('request invoke:' + req.path);
            res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond));
        }
    };
};