laravel CORS 请求未成功
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51331029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CORS request did not succeed
提问by Shinoda_
I have a problem when I want to create an authentication system using VueJs as the frontend (http://localhost:8080/#/login) and Laravel 5.6 as the backend. When I try to submit login form using the api login url http://127.0.0.1:8000/api/v1/login, I get the error message:
当我想创建一个使用 VueJs 作为前端 ( http://localhost:8080/#/login) 和 Laravel 5.6 作为后端的身份验证系统时遇到了问题。当我尝试使用 api login url 提交登录表单时http://127.0.0.1:8000/api/v1/login，我收到错误消息：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/login. (Reason: CORS request did not succeed).
跨域请求被阻止：同源策略不允许在http://127.0.0.1:8000/api/v1/login读取远程资源。（原因：CORS 请求没有成功）。
I don't know how to solve this problem.
我不知道如何解决这个问题。
Could anyone here help me to solve my problem?
这里有人能帮我解决我的问题吗？
NOTE :I have to install laravel-corsbefore
注：我必须安装laravel-CORS前
回答by user11864445
This is an old question, but I'll reply nonetheless.
这是一个老问题，但我还是会回答。
For me this error was caused by a self-signed certificate. If you open developer tools, select the network tab, click the call that failed CORS you can see the security tab. Click it to open it. If a cert is giving you problems the text "An error occurred: SEC_ERROR_INADEQUATE_KEY_USAGE" should be visible.
对我来说，这个错误是由自签名证书引起的。如果打开开发者工具，选择网络选项卡，点击调用失败的CORS就可以看到安全选项卡。单击它以将其打开。如果证书给您带来问题，文本“发生错误：SEC_ERROR_INADEQUATE_KEY_USAGE”应该是可见的。
To resolve this just go to the URL that gave you the CORS error, and accept the cert manually.
要解决此问题，只需转到提供 CORS 错误的 URL，然后手动接受证书。
回答by zizzo
You have to use either localhostor 127.0.0.1for all the requests. In general in your code you should make calls to the server by just appending the URI to the current host, without re-adding the host and port in the URI string. If you load your page from a given host, for example 127.0.0.1and then try to make an AJAX request to another host, for example www.host.com, the request gets blocked to prevent XSS attacks
您必须使用其中一个localhost或127.0.0.1所有请求。通常，在您的代码中，您应该通过将 URI 附加到当前主机来调用服务器，而无需在 URI 字符串中重新添加主机和端口。例如，如果您从给定的主机加载页面127.0.0.1，然后尝试向另一台主机发出 AJAX 请求，例如www.host.com，该请求将被阻止以防止XSS 攻击
回答by Dan Hilton
Cross Origin Resource Sharing is a mechanism that uses additional HTTP headers to tell a browser to allow the web application running on one origin (client) have permission to access selected resources from a server at a different origin.
跨源资源共享是一种机制，它使用额外的 HTTP 标头告诉浏览器允许在一个源（客户端）上运行的 Web 应用程序有权访问来自不同源的服务器的选定资源。
Basically, your Vue app (http://localhost:8080) needs to be allowed access to your Laravel endpoint (http://127.0.0.1:8000/api/v1/login) This is to prevent me from hitting your Laravel endpoint from my malicious website and acting like an authenticated user.
基本上，您的 Vue 应用程序 ( http://localhost:8080) 需要被允许访问您的 Laravel 端点 ( http://127.0.0.1:8000/api/v1/login) 这是为了防止我访问您的 Laravel 端点来自我的恶意网站并像经过身份验证的用户一样行事。
Based on the docs, you need to add 'allowedOrigins' => ['*'],but that means you're opening up your backend to all requests. That's fine if it's a public API but in this context it doesn't sound like you want that. Instead, in this case it would be 'allowedOrigins' => ['localhost:8080'],so that your Vue app can consume your Laravel server.
根据docs，您需要添加，'allowedOrigins' => ['*'],但这意味着您正在向所有请求开放您的后端。如果它是一个公共 API，那很好，但在这种情况下，它听起来不像你想要的。相反，在这种情况下'allowedOrigins' => ['localhost:8080'],，您的 Vue 应用程序可以使用您的 Laravel 服务器。
回答by bigtunacan
It sounds like you are running this in dev mode via webpack currently? If that is correct and your workflow is that you are going to build the Vue application and have it co-reside with your Laravel backend then you just need to update config/index.jsto have a proxyTableentry that forwards webpack requests to the correct dev Laravel backend server.
听起来您目前正在通过 webpack 在开发模式下运行它？如果这是正确的并且您的工作流程是您将构建 Vue 应用程序并将其与您的 Laravel 后端共存，那么您只需要更新config/index.js以拥有一个proxyTable将 webpack 请求转发到正确的开发 Laravel 后端服务器的条目。
This would look something like this.
这看起来像这样。
module.exports = {
dev: {
proxyTable: {
"/": "http://127.0.0.1:8000/api/v1/login"
}
}
}
There is additional information available on how this works; https://vuejs-templates.github.io/webpack/proxy.html
还有关于它是如何工作的其他信息；https://vuejs-templates.github.io/webpack/proxy.html
回答by Eddy
In my case the computer was not displaying the correct date and time. When I try to view the page I would get the "CORS request did not succeed." Once I updated to the correct time and date the page displayed normally.
就我而言，计算机未显示正确的日期和时间。当我尝试查看该页面时，我会收到“CORS 请求未成功”的消息。一旦我更新到正确的时间和日期，页面就会正常显示。
回答by Ahmed Hafiz
I had to change the base URL of axios. I didn't notice it was https://, not http://
我不得不更改 axios 的基本 URL。我没有注意到它是https://，而不是http://
file: src\store\index.js
文件：src\store\index.js
change the
改变
axios.defaults.baseURL = 'https://127.0.0.1:8000/api'
to
到
axios.defaults.baseURL = 'http://127.0.0.1:8000/api'
Note: Make sure it's exactly same URL and Port. You can see that in terminal where you start the laravel application (php artisan serve).
注意：确保它的 URL 和端口完全相同。您可以在启动 Laravel 应用程序的终端 ( php artisan serve) 中看到这一点。
