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

[liujun0915]

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:

[PanJiaChen]

是否端口被占用？

[smvv21]

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

因为这 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() }

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

[sivaprabug]

Hi @smvv21 / Anyone,

Kindly explain in english i am also facing same issue while login

FYI:-

[yunhuduan]

解决方案:
第一步:
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方法

[Alfxjx]

Hi @smvv21 / Anyone,

Kindly explain 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

[sivaprabug]

Hi @smvv21 / Anyone,
Kindly explain 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

[ghost]

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));
		}
	};
};

[debug-null]

感谢，困扰了好几天。
但是有一些疑惑：
1、我相同的代码似乎npm安装后没问题，cnpm和yarn安装都有这个问题，可是后来，我由试了一次，还是不行。比较晕

请问，出现这个问题的原因到底是？我之前的项目也用这个模板，目前并没有出现这个问题。

[meizhuhanxiang]

我这边突然今天遇到这个问题了，之前一直运行好好的

[logicool]

这个应该是webpack-dev-server@3.10.0的问题，已经有人提交了merge
具体请看
webpack/webpack-dev-server/issues#2370
webpack/webpack-dev-server/pull/2374

[fenyuang]

Hi @smvv21 / Anyone,

Kindly explain in english i am also facing same issue while login

FYI:-

Hi,guys.The temporary methods to solve this problem is set cookie then sit down and waiting for the author fix this problem.

1. Project vue-element-admin set cookie

Admin-Token:admin-token

2. Project vue-element-template set cookie

vue_admin_template_token:admin-token

[PanJiaChen]

#2929

重新拉取最新代码已修复。