React Laravel 5.8.33 Axios: 使用 axios.post 请求注册用户时出错; 澄清代码问题

共5个回答, 标签: php reactjs laravel cors registration

更新

在我的开发工具 firefox 中检查我的网络标签给了我这个:

响应头 (290 B)
原始标题
访问控制-允许-原点
*
允许
邮政
缓存控制
无缓存,私有
连接
关闭
内容类型
文本/html; 字符集 = UTF-8
日期
Sat,格林尼治时间 2019年8月31日 09:45:04
日期
Sat,格林尼治时间 2019年8月31日 09:45:04
主机
本地: 8000
X 供电的
PHP/7.2.19-0ubuntu0.18.04.2
请求头 (438 B)
原始标题
* 接受: */* *
接受编码
Gzip,放气
接受语言
En-US,en; q = 0.5
访问控制请求头
X-csrf 令牌,x-request-with,x-xsrf 令牌
访问控制请求方法
邮政
连接
保持活力
主机
本地: 8000
起源
Http://127.0.0.0.1: 8000
推荐人
Http://127.0.0.1: 8000/register
用户代理
Mozilla/5.0 (X11; Ubuntu; Linu…) 壁虎/20100101 火狐/68.0

为什么方法会得到?试图从工具中改变它,它给出了 POST 方法是不允许的。此外,在提交请求时,它会提供以下信息:

更新

我开始对 bootstrap.js 文件进行更改,需要我的 axios,但我没有成功。我试着改变

Window.axios = 要求 (“axios”);

Window.axios.defaults.headers.common ['x-required-with'] = 'xmlhttprequest';

Window.axios = 要求 (“axios”);

Window.axios.defaults.headers.common = {
“X-required-with”: “xmlhttprequest”,
'X-CSRF-TOKEN': document.querySelector ('meta [名称 = "csrf-token"]')。getAttribute ('content'),
};

但说真的,我说不出话来。我不明白我评论中的链接教程是如何工作的,我开始对看什么缺乏想法。所以,任何帮助都是值得赞赏的; 如果有人可以指向一个有效的引用,上面写着,看,这是一个尚未解决的问题,那么我将用不同的代码实现 py 项目; 但是如果没有,我认为这个问题不应该一直没有解决。如果这是我的一个小错误,那么它到底在哪里?感谢所有人。

注意: 在我最初的帖子中,我没有展示我的网络路线是什么样子。因为我在 Laravel 内部使用 React (我在终端 php artisan preset react 中使用;) 我的网络路线从预先配置的 laravel 代码开始

路线:: get ('/',函数 () {
返回视图 (“欢迎”);
});

调用 React 应用程序的新代码:

路线:: 视图 ('/{路径?}','应用');

Update3: 我 (从昨天开始) 试图改变我的 apache2 conf,我的问题仍然存在。我不知道这是否应该被视为改变:

跨源请求被阻止: 同源策略不允许在 http://localhost: 8000/api/user/register 读取远程资源。(原因: 在 CORS 头 “访问控制允许标题” 中缺少令牌 “x-required-with”,来自 CORS 飞行前通道)。

跨源请求被阻止: 同源策略不允许在 http://localhost: 8000/api/user/register 读取远程资源。(原因: CORS 请求未成功)。

源映射错误: 请求失败,状态 404
资源网址: http://127.0.0.1: 8002/js/app.js
源地图 URL: popper.js.Map

更新 2: 我尝试更改我的 axios post 请求:

Const dataofuser = {
名称: data.name,
电子邮件: 数据。电子邮件,
密码: 数据。密码
}


Const 实例 = axios.create ({
方法: “post”,
BaseURL: “http://localhost: 8000/api/user/”,
超时: 1000,
标题: {'访问控制-允许-原始': '*','访问控制-允许-方法': 'post,GET,OPTIONS,PUT,delete', “访问控制允许标题”: “内容类型,X-认证令牌,起源,授权”,“X-required-with”: “xmlhttprequest”}
});

实例。邮政 ("注册/c
第1个答案

如果你正在使用 rest API,那么你需要照顾 CORS。

CORS 基本上是一个浏览器安全功能,而不是服务器端。

默认情况下,浏览器不允许某些交叉原点请求。与您交谈的服务器可以发布使用跨源请求是否安全,但理解和使用这些信息的是客户端,因此提供保护的不是服务器。

浏览器通过 OPTIONS 方法在原始请求之前自动发送 HTTP 请求,以检查发送原始请求是否安全。

只需尝试在服务器端启用 CORSLaravel-corsLaravel-cors包,允许您使用 Laravel 中间件配置发送跨源资源共享头。

或者以另一种方式,你可以在 laravel 的标题中添加下面的行。

“访问控制允许方法”: “post,GET,PUT,OPTIONS,delete”
“访问控制-允许-原始”: “*”
“访问控制允许证书”: “真实”
第2个答案

预检请求是一个HTTP-OPTIONS客户端向服务器发出请求,以验证它是否支持 CORS 协议。

Https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

要走的路是在服务器中注册一个路由,该路由返回一个具有必要访问控制策略头的响应。例如:

路线:: 选项 ('/{path}',函数 () {
返回响应 ('',200)
-> 标题 (
“访问控制允许标题”,
“起源、内容类型、内容范围、内容处置、内容描述、 X 认证令牌、 X 请求与”)
-> 标题 (“访问控制允许方法”,“post,GET,PUT,OPTIONS,delete”)
-> 标题 (“访问控制-允许-原始”,“*”)
-> 标题 (“访问控制允许证书”,“真实”);
})-> 在哪里 (“路径”。* ”);

这类似于您的问题中的中间件方法,只是中间件附加到路由,但不提供回退options请求这些路线。

第3个答案

我将在这里发布我是如何发现我的 Laravel-React-Axios 简单但注册应用程序发生了什么。从上面的帖子中,试图解决这个问题,只有 ClueMediator 的一些评论对如何理解幕后的问题有所帮助,昆廷在我的帖子上发表了一些有益的评论。我必须在这里指出,据我所知,所有其他关于 axios 和 laravel 和的帖子和 github 讨论。Js 前端根本没有关注这一点 (或者如果他们关注了,他们没有认真关注它)。

首先,人们可以在我的第一篇文章中看到,从本地主机更改 post 请求: 8000 仅仅是 api/route 的名称似乎影响了一些 cors 的删除; 因为我一次在一两台服务器上运行这个项目,Cors 可以作为工匠为应用程序服务的功能回来。

第二,即使在 cors 已经减少的情况下,内部 500 错误也出现了; 这是因为我从教程中学习到的错误,并且与迁移的不完整构建有关。

到了这一点。Axios 似乎总是试图发送一个选项请求,以及我在代码中的请求 (在这个例子中是一个 post 请求)。我所做的检查问题是改变我的主机和端口,因为工匠正在服务,并将我的代码放在一起,以正确匹配路由。然后,在控制台检查网络选项卡,我看到尽管 post 请求发送得很好,但我仍然有 cors,因为 axios.options 请求默认情况下会发送到本地主机: 8000,但是我没有从那里提供我的应用程序。指定工匠从那里服务,并纠正迁移结构,解决了这个问题。

这里强调一点很重要: artisan 在本地主机服务: 8000 第一次打开他/但打开第二台服务器时,它会像通常一样在下一个可用端口上运行。如果不是迁移代码中的错误,我可能会发现这个问题来自工匠和它的服务。但是,虽然我的数据库出现了故障,但即使在那时,我还是收到了一个 500 错误作为内部服务器错误,这让我打开了另一个服务器, 然后发现 axios 总是只向 localhost: 8000 发送 options 请求,即使我的前端和后端彼此同意,对代码进行许多更改会产生不一致。因此,总之,在处理了糟糕的代码 (我应该比我看到的更快) 后,这只是一个正确地将 axios 和 artisan 设定为一致的问题。

对上述逻辑如何改进的任何观察都将是巨大的。

感谢所有人。

第4个答案

你试过使用csrf token as a post parameter? if not what you can do is, set the csrf token and token in post parameters of your axios请求。它会解决你的问题。

第5个答案

我已经安装 Https://github.com/barryvdh/laravel-cors

对于 CORS 问题 这是我的工作

最好不要使用 axios 头默认,在某些情况下,它对我不起作用,使用手动加载头

Const 选项 = { 方法: “post”, 标题: {'x CSRF-TOKEN': 'xxx'}, 数据: 数据, Url, }; Axios (选项);

相关问题

mysql _ 拿给数组 ()/mysql_fetch_assoc ()/mysql_fetch_row ()/mysql_num_rows 等希望参数1是资源或结果 参考-此错误在 PHP 中意味着什么? 如何在 PHP 中分析和处理 HTML\ xml? 如何使用使用效果挂钩注册事件? 未知的浏览器 kaios 在 Set间隙中使用 "反应状态" 挂钩时状态不更新 React Laravel 5.8.33 Axios: 使用 axios.post 请求注册用户时出错; 澄清代码问题 工匠命令 “品牌: 月 Laravel 验证” 是不确定的 使用 Laravel 创建新项目会引发异常 Express api 获取请求返回未定义的 [副本] 在飞行前响应中,访问控制允许标题不允许 Firebase-请求标题字段 x-firebase-gmpid Sampleconsensussrelejective (ext.真的有用吗?