Question

当我想使用VueJs作为前端（http://localhost:8080/#/login）和Laravel 5.6作为后端创建身份验证系统时遇到问题。当我尝试使用api登录网址http://127.0.0.1:8000/api/v1/login提交登录表单时，收到错误消息：

跨源请求被阻止：同源策略禁止在https://clockofeidolon.com处读取远程资源。（原因：CORS请求未成功。）

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

这里有人可以帮助我解决我的问题吗？

注意：：我必须先安装http://127.0.0.1:8000/api/v1/login

Answer 1

对于所有请求，您都必须使用localhost或127.0.0.1。通常，在您的代码中，您应该通过仅将URI附加到当前主机上来对服务器进行调用，而不必在URI字符串中重新添加主机和端口。如果您从给定主机（例如127.0.0.1）加载页面，然后尝试向另一个主机（例如www.host.com）发出AJAX请求，该请求将被阻止以防止XSS attacks

Answer 2

这是一个老问题，不过我还是会答复。

对我来说，此错误是由自签名证书引起的。如果打开开发人员工具，请选择“网络”选项卡，单击未通过CORS的呼叫，您可以看到“安全性”选项卡。单击它将其打开。如果证书给您带来问题，则应该显示文本“发生错误：SEC_ERROR_INADEQUATE_KEY_USAGE”。

要解决此问题，只需转到为您提供CORS错误的URL，然后手动接受证书即可。

Answer 3

跨源资源共享是一种机制，该机制使用其他HTTP标头来告诉浏览器，以允许在一个源（客户端）上运行的Web应用程序有权从其他源的服务器访问选定的资源。

基本上，需要允许您的Vue应用（http://localhost:8080）访问Laravel端点（http://127.0.0.1:8000/api/v1/login），这是为了防止我从恶意网站访问Laravel端点并像经过身份验证的行为用户。

基于docs，您需要添加$ev.target，但这意味着您要向所有请求开放后端。如果它是公共API，那很好，但是在这种情况下，听起来并不像您想要的那样。相反，在这种情况下，它将是$event.target，以便您的Vue应用可以使用您的Laravel服务器。

Answer 4

听起来您当前正在通过Webpack在开发人员模式下运行此程序？如果这是正确的，并且您的工作流程是要构建Vue应用程序并将其与Laravel后端共存，那么您只需更新config/index.js即可获得一个proxyTable条目来转发Webpack请求到正确的开发Laravel后端服务器。

这看起来像这样。

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

有关此工作原理的其他信息； https://vuejs-templates.github.io/webpack/proxy.html

Answer 5

就我而言，计算机未显示正确的日期和时间。当我尝试查看页面时，我将收到“ CORS请求未成功”。一旦我更新到正确的时间和日期，页面就会正常显示。

Answer 6

我不得不更改axios的基本URL。我没有注意到它是 https：// ，而不是 http：//

文件：src \ store \ index.js

更改

L2

到

axios.defaults.baseURL = 'https://127.0.0.1:8000/api'

注意：确保其URL和端口完全相同。您可以在启动laravel应用程序（axios.defaults.baseURL = 'http://127.0.0.1:8000/api'）的终端中看到它。

CORS要求未成功

6 个答案: