CORS请求未成功

问题描述 投票:2回答:4

我有一个问题,当我要创建使用VueJs作为前端(http://localhost:8080/#/login)和Laravel 5.6作为后端的认证系统。当我尝试使用API​​登录URL http://127.0.0.1:8000/api/v1/login提交登录表单,我得到的错误信息:

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

我不知道如何解决这个问题。

可以在这里谁能帮我解决我的问题?

注:我之前安装laravel-cors

laravel vue.js
4个回答
2
投票

您可以选择使用localhost127.0.0.1的所有请求。一般在你的代码,你应该只是附加的URI当前主机,无需重新添加主机和端口的URI字符串拨打电话到服务器。如果从给定主机,例如127.0.0.1加载网页,然后尽量使一个AJAX请求到另一台主机,例如www.host.com,该请求被封锁,以防止XSS attacks


1
投票

跨源资源共享是使用其他HTTP标头告诉浏览器,允许在一个原点(客户端)有权在不同的起源从服务器访问选定的资源运行Web应用程序的机制。

基本上,你的Vue公司的应用程序(http://localhost:8080)需要被允许您Laravel端点(http://127.0.0.1:8000/api/v1/login)这是为了防止我从我的恶意网站打你Laravel端点表现得像一个身份验证的用户访问。

基于该docs,你需要添加'allowedOrigins' => ['*'],但是这意味着你的后端开放所有请求。那很好,如果它是一个公共的API,但在这种情况下它听起来不像你想要的。相反,在这种情况下,将'allowedOrigins' => ['localhost:8080'],让您的Vue公司的应用程序可以消耗你Laravel服务器。


1
投票

这听起来像你正在开发的模式,通过当前的WebPack运行此?如果这是正确的,你的工作流程是,你要建立的Vue的应用程序并共同居住与Laravel后端,那么你只需要更新config/index.js到具有的WebPack请求转发到正确的开发Laravel后端服务器的proxyTable进入。

这将是这个样子。

module.exports = {
  dev: {
    proxyTable: {
      "/": "http://127.0.0.1:8000/api/v1/login"
    }
  }
}

有关于如何工作提供更多的信息; https://vuejs-templates.github.io/webpack/proxy.html


1
投票

这是一个老问题,但我仍然会回复。

对我来说,这个错误是由自签名证书造成的。如果打开开发工具,选择网络选项卡,单击失败CORS你可以看到安全选项卡中的电话。点击打开它。如果证书是给你的问题文本“时出现错误:SEC_ERROR_INADEQUATE_KEY_USAGE”应该是可见的。

要解决此只是去那给你的CORS错误的URL,并手动接受证书。


0
投票

在我的情况下,电脑是显示不正确的日期和时间。当我尝试查看网页我会得到“CORS请求未成功。”有一次,我更新到正确的时间和日期正常显示页面。

© www.soinside.com 2019 - 2024. All rights reserved.