当我想创建一个使用 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
【问题讨论】：
对于所有请求，您必须使用 localhost 或 127.0.0.1。通常，在您的代码中，您应该通过将 URI 附加到当前主机来调用服务器，而无需在 URI 字符串中重新添加主机和端口。如果您从给定主机（例如 127.0.0.1）加载页面，然后尝试向另一个主机（例如 www.host.com）发出 AJAX 请求，该请求将被阻止以阻止 XSS attacks
【讨论】：
跨源资源共享是一种机制，它使用额外的 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 服务器。
【讨论】：
听起来您目前正在通过 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
【讨论】：
在我的情况下，计算机没有显示正确的日期和时间。当我尝试查看该页面时，我会收到“CORS 请求未成功”。一旦我更新到正确的时间和日期，页面就会正常显示。
【讨论】：
这是一个老问题，但我还是会回复。
对我来说，这个错误是由自签名证书引起的。如果你打开开发者工具，选择网络选项卡，点击 CORS 失败的调用就可以看到安全选项卡。单击它以打开它。如果证书给您带来问题，则应显示文本“发生错误：SEC_ERROR_INADEQUATE_KEY_USAGE”。
要解决此问题，只需转到出现 CORS 错误的 URL，然后手动接受证书。
【讨论】：
我不得不更改 axios 的基本 URL。我没有注意到它是 https://，而不是 http://
文件：src\store\index.js
改变
axios.defaults.baseURL = 'https://127.0.0.1:8000/api'
到
axios.defaults.baseURL = 'http://127.0.0.1:8000/api'
注意：确保 URL 和端口完全相同。您可以在启动 laravel 应用程序的终端中看到这一点 (php artisan serve)。
【讨论】：
我最近在尝试让我们通过 Azure（应用服务）托管的旧网站之一重新启动并运行时遇到了这个错误。
Reason: CORS request did not succeed 是浏览器控制台中显示的错误，但是，对于我们的案例，CORS 错误中提到的 URL 不再存在 - 它指的是我们拥有的旧 https://******.azurewebsites.net 服务 URL（以前托管在 Azure - 应用服务中）。
因此还要检查 CORS 错误中提到的 URL 是否确实有效。
【讨论】：