访问控制允许来源的错误，但请求经过 [英] Access-Control-Allow-Origin error but request goes through
问题描述
我目前正在部署到我的实时服务器基本的API和我遇到（我认为是）一个CORS问题，但有一些行为回事，我无法解释。
I'm currently deploying a basic API to my live server and I'm running into (what I think is) a CORS problem but there is some behavior going on that I can't explain.
我从AngularJS前端到Laravel 5通信（+ laravel-CORS ）后端。
I'm communicating from an AngularJS front-end to a Laravel 5 (+ laravel-cors) back-end.
我开始测试一个简单的jQuery AJAX调用（如下图），当我从做我的本地流浪的环境（要求 HTTP：//dev.example.local/test.html ）以 http://api.example.com/v1/matches 我得到关于
I started testing with a simple jQuery AJAX call (below) and when I make a request from my local Vagrant environment (http://dev.example.local/test.html) to http://api.example.com/v1/matches I get an error about Access-Control-Allow-Origin. The weird thing is that the request does come through because the information is stored in the database via the Laravel-based API correctly.
$.ajax({
method: 'POST',
url: 'http://api.example.com/v1/players',
data: {
"username": "username",
"first_name": "First",
"last_name": "Last",
"nickname": ""
}
}).always(function(r) {
console.log(r);
});
错误：
XMLHttpRequest cannot load http://api.example.com/v1/players. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dev.onefinity.local' is therefore not allowed access.
的的console.log（R）收益 {readyState的：0，responseJSON：不确定，状态：0，状态文本：错误}
我在本地开发利用宅基地VM（API）和一个流浪的环境（应用程序）的应用和它在这些环境中正常工作...
I developed the application locally using a Homestead VM (API) and a Vagrant environment (application) and it's working correctly within these environments...
有些意见：
- 每个请求的出现与方法：
POST，状态：200 OK，类型：XHR在我的Chrome开发者工具。 - 像邮差和PhpStorm的REST服务测试工具正常执行的请求，并没有错误添加数据。
- Each of these requests shows up with Method:
POST, Status:200 OK, Type:xhrin my Chrome Developer Tools. - Tools like Postman and PhpStorm's RESTful service tester correctly execute the request and the data is added without errors.
就如何进一步调试这个问题的任何想法，欢迎...我一直在努力，现在来包装我的头解决这个整个一天，我只是不知道是什么导致了它。
Any ideas on how to further debug this problem are welcome... I've been trying to wrap my head around this for the entire day now and I just don't know what's causing it.
推荐答案
您的服务器必须在响应返回相应的访问控制允许来源头。例如，如果该请求被寄自 http://stackoverflow.com ，那么你的服务器必须返回这个头：访问控制允许来源：http://stackoverflow.com 。您可以确定，服务器端，原产地是通过查看原产地的请求头的东西。如果您的服务器确实的不的在响应返回这个头，你不会有响应浏览器端的属性的任何访问（如状态code，标题或邮件正文） 。该同源策略是在这个限制的中心
Your server must return an appropriate Access-Control-Allow-Origin header in the response. For example, if the request is being sent from http://stackoverflow.com, then your server must return this header: Access-Control-Allow-Origin: http://stackoverflow.com. You can determine, server-side, what the origin is by looking at the Origin header on the request. If your server does not return this header in the response, you will not have any access to the properties of the response browser-side (such as the status code, headers, or message body). The Same Origin Policy is at the center of this restriction.
当请求是由邮差或PhpStorm的RESTful服务测试仪送你没有看到任何类似的问题，其原因是由于这一事实，即这些服务做的不的发送产地头与请求，因为他们不受同源策略。默认情况下，浏览器将追加这个头给任何跨域Ajax请求，因为浏览器的是的受同源策略。在我的previous情况下，请求头是这样的：产地：http://stackoverflow.com 。实现的CORS规范浏览器都需要添加此请求头，这样服务器能够确定如果请求的来源已经被列入白名单的跨域Ajax请求。如果是这种情况下，服务器会返回正确的访问控制允许来源头。如果不是，它可以简单地忽略头。不实现的CORS规范浏览器会直接拒绝发送这样一个Ajax请求。
The reason you are not seeing any similar issues when the request is sent by Postman or PhpStorm's RESTful service tester is due to the fact that these services do not send an Origin header with the request, as they are not subject to the Same Origin policy. By default, the browser will append this header to any cross-origin ajax requests, as browsers are subject to the Same Origin Policy. In my previous scenario, the request header would look like this: Origin: http://stackoverflow.com. Browsers that implement the CORS spec are required to add this request header so the server is able to determine if the origin of the request has been whitelisted for cross-origin ajax requests. If this is the case, the server will return the proper Access-Control-Allow-Origin header. If not, it can simply omit the header. Browsers that do not implement the CORS spec will simply refuse to send such an ajax request.
关于你的困惑，为什么请求首先被发送，这归结为简单和非简单CORS请求之间的区别。为简单CORS请求，请求将<青霉>总是的被发送到服务器，但是客户端/ JS将不能够解析无需从服务器适当的确认的响应。有些CORS请求的不的简单的，可以这么说。这些，例如，删除或 PATCH 的要求，或 POST / GET 包含非标头（如X-头或一内容类型请求应用程序/ JSON，而不是为multipart / form-data的）。换句话说，一个请求的不的简单，如果它不能没有JavaScript发送。例如，＆LT;形式＆GT; 提交，或从℃的GET请求; SCRIPT SRC =...＆GT; 将始终发送简单的请求。对于非简单的请求，则浏览器必须preflight的请求。这意味着，浏览器发送的中间请求，称为preflight，前的原始请求的。这preflight请求是选项请求。服务器必须比在针对这一preflight的承认原始请求的任何非标准属性返回头。如果确实如此，那么浏览器就会发出原始请求。
Regarding your bewilderment as to why the request is being sent in the first place, that comes down to a distinction between "simple" and "non-simple" CORS requests. For simple CORS requests, the request will always be sent to the server, but the client/JS will not be able to parse the response without proper acknowledgement from the server. Some CORS requests are not simple, so to speak. These are, for example, DELETE or PATCH requests, or POST/GET requests that contain non-standard headers (such as X-headers or a Content-Type of "application/json" as opposed to "multipart/form-data"). In other words, a request is not simple if it cannot be sent without JavaScript. For example, a <form> submit, or a GET request from a <script src="..."> will always send "simple" requests. For non-simple requests, the browser must "preflight" the request. This means that the browser sends an intermediate request, called a preflight, before the original request. This preflight request is an OPTIONS request. The server must than return headers in the response to this preflight that acknowledge any non-standard properties of the original request. If it does, then the browser will send the original request.
您可以阅读更多关于preflighting和一般的CORS在 MDN 。
You can read more about preflighting and CORS in general on MDN.
这篇关于访问控制允许来源的错误，但请求经过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
