标签: preflight

我使用jquery-fileupload来允许用户将文件上传到外部服务(Cloudinary更具体):

<input type='file' name='file' class='cloudinary-fileupload' 
  data-url='https://api.cloudinary.com/v1_1/wya/auto/upload' />
<script>
  $('.cloudinary-fileupload').fileupload();
</script>

由于它是外部目标,因此浏览器会发起CORS请求.但是,我注意到浏览器会预先设置CORS预检请求. http://www.html5rocks.com/en/tutorials/cors/提供了关于何时触发预检请求以及何时未触发预检请求的非常好的见解.据我所知,我的请求满足了作为CORS简单请求的所有标准(请参阅"CORS请求类型"一节).

该文件上传请求发送到外部服务:

POST /v1_1/wya/image/upload HTTP/1.1
Host: api.cloudinary.com
Connection: keep-alive
Content-Length: 22214
Accept: */*
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarym73rCIa6t8eTNkTa
Referer: http://wya.herokuapp.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2

在文件上载请求之前发送到外部服务的附加预检请求:

OPTIONS /v1_1/wya/image/upload HTTP/1.1
Host: api.cloudinary.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) …

我正在使用 AngularJS 并尝试使用 Google 的 reCAPTCHA，我正在使用“显式呈现 reCAPTCHA 小部件”方法在我的网页上显示 reCAPTCHA，

HTML 代码 -

<script type="text/javascript">
    var onloadCallback = function() 
    {
        grecaptcha.render('loginCapcha', {
            'sitekey' : 'someSiteKey',
            'callback' : verifyCallback,
            'theme':'dark'

        });
    };

    var auth='';
    var verifyCallback = function(response) 
    {
       //storing the Google response in a Global js variable auth, to be used in the controller
        auth = response;

        var scope = angular.element(document.getElementById('loginCapcha')).scope();
        scope.auth();
    };
</script>

<div id="loginCapcha"></div>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

到目前为止，我能够实现用户是人类还是机器人所需的功能，
根据我上面的代码，我的代码中有一个名为“verifyCallback”的回调函数，
它存储由 Google …

我有一个Laravel 5.4 API,在Postman和浏览器中工作正常.Localhost工作正常 - Laravel 5.4在一个端口上运行,而热部署模式下的Vue运行正常.

但是,当我将Vue代码移动到我的生产服务器时,我收到此错误:

Response for preflight is invalid (redirect)

在Chrome开发者工具中,网络标签显示以下内容:

一般

Request URL:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/
Request Method:OPTIONS
Status Code:301 Moved Permanently
Remote Address:217.182.66.247:80
Referrer Policy:no-referrer-when-downgrade

响应标题

Connection:Keep-Alive
Content-Length:349
Content-Type:text/html; charset=iso-8859-1
Date:Mon, 10 Jul 2017 13:40:08 GMT
Keep-Alive:timeout=5, max=100
Location:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90
Server:Apache/2.4.25 (Ubuntu)

起源标题

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin,authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:backend-dev.xolas.io
Origin:http://localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Mobile Safari/537.36

我在Laravel上安装了一个CORS插件,仍然没有任何乐趣.

我的axios配置如下:

axios.defaults.headers.common['Authorization'] = store.apiKey
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.post['Content-Type'] = …

我正在尝试从连接到另一个域的CouchDB的应用程序中更改用户的密码.我的代码或多或少与CouchDB Docs中的示例相同,即获取文档,更改数据,然后发送带有更改的PUT请求.PUT请求发生问题 - 由于CORS,浏览器在发送PUT请求之前尝试执行OPTIONS请求,但OPTIONS请求返回405 Method Not Allowed.

有没有人知道如何解决这个问题？

这是请求标题,以防它有用:

OPTIONS /_users/org.couchdb.user:clinic_admin HTTP/1.1
Host: localhost:15984
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: PUT
Origin: https://localhost:15000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36
Access-Control-Request-Headers: content-type, if-match
Accept: */*
Referer: https://localhost:15000/webapp/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ja;q=0.6,sv;q=0.4,zh-CN;q=0.2

我正在开发一些网页，该网页允许将文件从客户端直接上传到我的azure存储。我的文件存储在Portal的Azure BLOB存储中。为此，我使用的是npm的“ azure-storage” v2.8.1软件包。

当我尝试创建容器时：

    const blobService = AzureStorage.createBlobServiceWithSas(storageUri, sasToken)
    blobService.createContainerIfNotExists(containerName, { publicAccessLevel: 'blob' }, (error, result, response) => {.....})

我有错误：

1. 选项[URL到我的存储器] 403（未启用CORS或找不到与此请求匹配的规则。）

2. 无法加载[到达我的存储库的网址]：对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。

我确定Blob连接字符串正确-我检查了它。另外，我知道我可以为azure.portal上的存储编辑CORS。当前为空。

我是否需要在其中添加/编辑一些CORS？有人知道解决方案吗？

AngularJS使用REST对服务器端进行身份验证,并获取JSESSIONID cookie.在下一步中,我尝试使用REST从服务器端获取一些JSON数据以及在上一步中获得的会话cookie.这是客户端代码:

getSomeJSONDataFromServer:function() {
var deferred = $q.defer();
$http({
    method: 'POST',
    withCredentials: true,
    url: "http://domain.name/app/someURL",
    headers:{
        'Accept':'application/json',
        'Content-Type':'application/json; charset=utf-8',
        'Access-Control-Request-Headers': 'X-Requested-With, content-type, accept, origin, withcredentials'
    }
})
.success(function(data, status, headers, config) {
    // handle data
})
.error(function(data, status, headers, config) {
    // handle error
});
return deferred.promise;
}

上面的代码工作正常:

当我在上面的POST请求体中发送一些数据时,问题就开始了.

...
$http({
    method: 'POST',
    withCredentials: true,
    url: "http://domain.name/app/someURL",
    headers:{
        'Accept':'application/json',
        'Content-Type':'application/json; charset=utf-8',
        'Access-Control-Request-Headers': 'X-Requested-With, content-type, accept, origin, withcredentials'
    },
    data: '{}'
})
.success(...

上述代码在prelight请求中失败:

看起来服务器启动一个新会话,因为会话cookie由于某种原因没有发送.无论如何,我觉得我错过了一些非常简单的东西,一些标题或类似的东西...任何想法都很感激.提前致谢.

我有一个 WebAPI 项目，并且按照以下步骤启用了 CORS：

1. 获取 nuget 包：Install-Package Microsoft.AspNet.WebApi.Cors.
2. 添加config.EnableCors();到 WebApiConfig.cs。
3. 添加[EnableCors(origins: "*", headers: "*", methods: "*")]到我的控制器。

我的控制器位于根控制器文件夹中，并且位于区域内。

/Controllers/ValuesController
/Areas/TestArea/Controllers/OtherStuffController

两个控制器都有该[EnableCors(...)]属性。

我的问题是这只ValuesController有效。

使用 Fiddler 检查请求，OtherStuffController我可以看到客户端发送了预检 OPTIONS 请求，但服务器响应为 404 not find 而不是 200 OK，但工作ValuesController正常。

我究竟做错了什么？为什么 TestArea 区域中的控制器不能处理 CORS 请求，而 Values 控制器却可以？

除了名称之外，这两个控制器没有任何不同，而且它们位于一个区域中。

附加信息

路线：

// In WebApiConfig.cs
config.Routes.MapHttpRoute("DefaultApi", "{controller}/{id}", 
    new {id = RouteParameter.Optional} );

// In Areas/TestArea/TestAreaAreaRegistration.cs
context.MapRoute("TestArea_default","TestArea/{controller}/{id}",
    new {id = UrlParameter.Optional});

我用来访问操作方法的 URL：

http://localhxst:57578/values
http://localhxst:57578/testarea/otherstuff

价值观要求（工作）：

(REQUEST) …

CORS预检请求显然使用OPTIONS方法并具有Origin标头.但是,浏览器可以决定添加Origin头的任何 HTTP请求.此外,OPTIONS可用于除CORS之外的其他功能.(如何)我是否可以准确识别(没有误报或否定)请求是否是CORS预检请求？

我希望这个问题不是太模糊，但我觉得我错过了一些基本的东西。这就是我所处的情况。我们有一个胖客户端应用程序，它在每个用户的本地计算机 (Windows 7) 上运行，并提供一个 JavaScript API 来与应用程序交互。我们有一个托管在服务器上的 Web 应用程序，但向 localhost 发出 AJAX 请求以与胖客户端 JS API 交互。

在一台机器上，我们加载 Web 应用程序。对 localhost 发出的所有 AJAX 请求都是在没有 OPTIONS 预检请求的情况下发出的。JS 控制台的 net 选项卡显示正在制作的 POST，并且响应成功（我可以告诉胖客户端在响应中包含哪些标头，包括所有必要的 CORS 标头）。

在另一台机器上，我们从同一台服务器加载 Web 应用程序。但是，当向本地主机发出 AJAX 请求时，会发出（预期的）OPTIONS 请求。不幸的是，胖客户端没有响应适当的 Access-Control-Allow-Origin 标头，因此不允许进行后续的 POST。

浏览器无关紧要，我们已经测试了最新版本的 Firefox 和 Chrome，我们总是从机器上得到相同的行为。我们已经在 4 台机器上进行了测试——2 台发送 OPTIONS，2 台只发送没有前面 OPTIONS 的 POST。似乎由浏览器决定 AJAX 目标是否与源不同以及它是否发送预检请求。我终生无法弄清楚为什么我的机器不发送任何 OPTIONS 请求，即使 AJAX 请求（到 localhost 或 lvh.me）是与网页源不同的主机/域，但从另一台机器加载相同的页面确实会产生它们。

是否有某种浏览器设置会影响这一点？还是 Windows 设置？为什么我们会在这方面看到不同的行为？

更新1：

为了简化和澄清，我有两台机器，machineA 和 machineB。两台机器都从远程服务器 example.com 加载 Web 应用程序。两台机器都在它们的本地机器上安装了一个完整的厚应用程序，提供了一个 Web 服务器和 API。从example.com 加载的Web 应用程序包含用于向本地主机提交AJAX 请求的JavaScript 代码，以便每个用户都可以与他们自己的胖客户端应用程序本地实例进行交互。由于 localhost …

https://example.com触发 ajax 预请求（beforeSend）到https://api.example.com (nginx)

$.ajax({
    method: "POST",
    url: 'https://api.example.com',
    xhrFields: {withCredentials: true},
    data: {...},
    success: function(msg) {...},
    beforeSend: function(request){
        var token = 'xxxxxx';
        request.setRequestHeader('Authorization', 'Bearer ' + token);
    },
    complete: function(msg) {},
    error: function(xhr, ajaxOptions, thrownError) {}
});

Chrome 控制台返回错误消息

XMLHttpRequest 无法加载https://api.example.com/auth。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权。