所以我将laravel配置为api并且作为单独的app我有vue。在Laravel我有角色设置：
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT', 'DELETE']
'exposedHeaders' => [],
'maxAge' => 60,
我有这两条路线：
Route::group(['middleware' => ['api']], function () {
Route::post('/auth/register', 'UserController@register');
Route::post('/auth/login', 'UserController@login');
});
UserController中@寄存器
public function register(UserRegister $request)
{
return 'hello';
}
和UserRegister：
public function rules()
{
return [
'name' => 'required|max:50',
'email' => 'required|email|unique:users|max:100',
'password' => 'required|min:6|confirmed',
];
}
public function messages()
{
return [
'name.required' => 'Name is required',
'name.max' => 'Name can only contain up to 50 characters',
'email.required' => 'Email address is required',
'email.email' => 'Email address must be a right format',
'email.unique' => 'Email address must be unique',
'email.max' => 'Email can only contain up to 100 characters',
'password.required' => 'Password is required',
'password.min' => 'Password must be minimum of 6 characters',
'password.confirmed' => 'Password does not match password confirmation',
];
}
这是我的观点：
data() {
return {
form: new Form({
name: '',
email: '',
password: '',
password_confirmation: ''
})
}
},
methods: {
onSubmit() {
this.form.post('https://webuilder.app/api/auth/register')
.then(response => alert('Wahoo!'));
}
}
我的表单类：
import Errors from './error.js';
class Form {
/**
* Create a new Form instance.
*
* @param {object} data
*/
constructor(data) {
this.originalData = data;
for (let field in data) {
this[field] = data[field];
}
this.errors = new Errors();
}
/**
* Fetch all relevant data for the form.
*/
data() {
let data = {};
for (let property in this.originalData) {
data[property] = this[property];
}
return data;
}
/**
* Reset the form fields.
*/
reset() {
for (let field in this.originalData) {
this[field] = '';
}
this.errors.clear();
}
/**
* Send a POST request to the given URL.
* .
* @param {string} url
*/
post(url) {
return this.submit('post', url);
}
/**
* Send a PUT request to the given URL.
* .
* @param {string} url
*/
put(url) {
return this.submit('put', url);
}
/**
* Send a PATCH request to the given URL.
* .
* @param {string} url
*/
patch(url) {
return this.submit('patch', url);
}
/**
* Send a DELETE request to the given URL.
* .
* @param {string} url
*/
delete(url) {
return this.submit('delete', url);
}
/**
* Submit the form.
*
* @param {string} requestType
* @param {string} url
*/
submit(requestType, url) {
return new Promise((resolve, reject) => {
axios[requestType](url, this.data())
.then(response => {
this.onSuccess(response.data);
resolve(response.data);
})
.catch(error => {
console.log(error);
this.onFail(error);
reject(error);
});
});
}
/**
* Handle a successful form submission.
*
* @param {object} data
*/
onSuccess(data) {
alert(data.message); // temporary
this.reset();
}
/**
* Handle a failed form submission.
*
* @param {object} errors
*/
onFail(errors) {
this.errors.record(errors);
}
}
导出默认表单;
error.js：
class Errors {
/**
* Create a new Errors instance.
*/
constructor() {
this.errors = {};
}
/**
* Determine if an errors exists for the given field.
*
* @param {string} field
*/
has(field) {
return this.errors.hasOwnProperty(field);
}
/**
* Determine if we have any errors.
*/
any() {
console.log(this.errors);
return Object.keys(this.errors).length > 0;
}
/**
* Retrieve the error message for a field.
*
* @param {string} field
*/
get(field) {
console.log(this.errors[field]);
if (this.errors[field]) {
return this.errors[field][0];
}
}
/**
* Record the new errors.
*
* @param {object} errors
*/
record(errors) {
this.errors = errors;
console.log(this.errors);
}
/**
* Clear one or all error fields.
*
* @param {string|null} field
*/
clear(field) {
if (field) {
delete this.errors[field];
return;
}
this.errors = {};
}
}
export default Errors;
因此，当我在填写表格后提出要求时，我得到了这个：
xhr.js？ec6c：178 XHR完成加载：OPTIONS ＆＃34; https://webuilder.app/api/auth/register＆＃34 ;. dispatchXhrRequest @ xhr.js？ec6c：178 xhrAdapter @ xhr.js？ec6c：12 dispatchRequest @ dispatchRequest.js？c4bb：59 Promise已解决（异步）请求@ Axios.js？5e65：51 Axios。（匿名函数）@ Axios.js？5e65：71 wrap @ bind.js？24ff：9（匿名）@ form.js？b695：94提交@ form.js？b695：93 post @ form.js？b695：52 onSubmit @register.vue？0a4c：65 boundFn @ vue.esm.js？efeb：190提交@register.vue？c4f0：44 invoker @ vue.esm.js？efeb：2004 fn._withTask.fn._withTask @ vue.esm.js？efeb：1802 19：36：52.962 webuilder.app/api/auth/register:1 POST https://webuilder.app/api/auth/register 422（不可处理的实体） 19：36：52.962 webuilder.app/api/auth/register:1 POST https://webuilder.app/api/auth/register 422（不可处理的实体） 19：36：52.963寄存器：1无法加载 https://webuilder.app/api/auth/register：不 ＆＃39;访问控制允许来源＆＃39;标题出现在请求的上 资源。起源＆＃39; http://localhost:8080＆＃39;因此是不允许的 访问。响应具有HTTP状态代码422.错误：网络错误 at createError（createError.js？16d0：16） 在XMLHttpRequest.handleError（xhr.js？ec6c：87）错误：网络错误 at createError（createError.js？16d0：16） 在XMLHttpRequest.handleError（xhr.js？ec6c：87）
未捕获（承诺）错误：网络错误 at createError（createError.js？16d0：16） 在XMLHttpRequest.handleError（xhr.js？ec6c：87）createError @ createError.js？16d0：16 handleError @ xhr.js？ec6c：87承诺被拒绝 （async）onSubmit @register.vue？0a4c：66 boundFn @ vue.esm.js？efeb：190 提交@register.vue？c4f0：44 invoker @ vue.esm.js？efeb：2004
19：36：53.000 XHR加载失败：POST ＆＃34; https://webuilder.app/api/auth/register＆＃34;
当我检查响应时，我确实得到了包含所有验证错误的响应，但这些错误使我的帖子崩溃，并且当我在axios中的.catch上执行console.log（错误）时，没有显示验证错误。这里有什么帮助吗？