Question

我有一个使用REST Api的网站，现在我正在创建一个浏览器扩展，它将从一些页面收集数据并将它们发送回REST Api。因为我希望我的扩展程序兼容firefox和chrome，并且易于维护，我将实际代码作为脚本标记注入页面，然后像普通的javascript一样执行。我目前只在扩展的chrome版本上工作，我遇到了一个问题：

当我尝试将数据发送到api（PATCH请求）时，chrome不会让我说：

XMLHttpRequest无法加载http://my.rest/api。 Access-Control-Allow-Origin不允许原点http://website.com。

我将Access-Control-Allow-Headers，Methods和Origin都设置为正确的值，但它仍然不起作用。它适用于GET请求。我也尝试过POST和PUT请求，但那些也不起作用。

以下是我的标题：

请求：

OPTIONS /some/api/path HTTP/1.1
Host: my.rest
Connection: keep-alive
Access-Control-Request-Method: PATCH
Origin: http://website.com
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-FireLogger: 1.1
Access-Control-Request-Headers: accept, x-http-auth-user, x-http-auth-token, origin, content-type
Accept: */*
Referer: http://website.com/index.php
Accept-Encoding: gzip,deflate,sdch
Accept-Language: cs-CZ,cs;q=0.8

响应：

Access-Control-Allow-Headers:accept, x-http-auth-user, x-http-auth-token, origin, content-type
Access-Control-Allow-Methods:PATCH
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Type:text/html; charset=utf-8
Date:Thu, 04 Jul 2013 10:50:08 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.2 (Win64) PHP/5.4.3
X-Frame-Options:SAMEORIGIN
X-Powered-By:Nette Framework

我也尝试将Access-Control-Allow-Origin设置为与Origin标头完全相同的值，但它不起作用。此外，它似乎在Firefox中工作。我有Chrome 27，它应该是最新的。

Answer 1

你应该在你的回复标题中允许OPTIONS ..

“Access-Control-Allow-Methods”，“GET，POST，HEAD，OPTIONS，PUT，DELETE”

Answer 2

我在带有cors的node.js中面临类似的问题

您需要将“Access-Control-Allow-Origin”设置为特定域而不是通配符

示例：'Access-Control-Allow-Origin'为'http://website.com'

（您可以在您的服务器上拥有一个允许的来源数组，如果允许则检查请求，然后用那个而不是通配符回答）

您还可以将“Access-Control-Allow-Methods”标题设置为以下选项列表：

'POST，GET，OPTIONS，DELETE，PUT'

Answer 3

我在Chrome 27.0.1453.116上尝试过CORS，它对我有用。从客户端我所做的只是在jquery AJAX中将' crossDomain '设置为 true 。

$.ajax('http://localhost/Elements.Services/Elements.svc/REST/Element/Get?ID=1', {
                    type: 'GET',
                    crossDomain: true,
                    success: function (data) {
                      alert(data);
                    }
                });

在REST服务端为每个请求设置以下响应标头：

（“Access-Control-Allow-Headers”，“Accept”）要么（“Access-Control-Allow-Headers”，HTTPRequest.RequestedHeaders +“Accept”）
（“Access-Control-Allow-Methods”，“POST，PUT，GET”）
（“Access-Control-Allow-Origin”，“*”）

Here是关于CORS工作的精彩文章，这对我很有帮助。

Answer 4

在您的WebApi中：

将 Microsoft.AspNet.WebApi.Cors NuGet包添加到项目中

确保您还在全局，控制器或操作中注册CORS支持。

全球 - 在 App_Start 文件夹的 WebApiConfig.cs 文件中添加：

public static void Register(HttpConfiguration config) {

// New code: var cors = new EnableCorsAttribute( origins: "*", headers: "*", methods: "*"); config.EnableCors(cors);

// Other configurations

}

控制器 或 操作 - 如果需要/需要在这些级别提供支持（ this将覆盖全局设置 - 操作＆gt;控制器＆gt;配置）。以上控制器或操作签名：

[EnableCors(origins: "http://localhost:[*port #*]", headers: "*", methods: "*")]

注意： *是＆＃34;通配符＆＃34;，可能希望将提出请求的域 ex：（http://localhost:[ 端口＃]）

很容易错过/遗忘的东西......

在解决方案资源管理器中，右键单击api-project。在属性窗口中设置＆＃39;匿名身份验证＆＃39;启用!!!

Answer 5

我知道这是一个旧帖子，但我偶然发现了同样的问题。为我解决这个问题的事情是在我在后端设置 cors 之前卸载我在 chrome 中允许 cors 的扩展。可以在此处找到扩展：https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en。因此，请确保您在 chrome 中没有任何可能会搞砸的扩展。

Answer 6

为什么不使用PUT代替PATCH和您的请求类型。他们几乎做同样的事情

Chrome跨域PATCH请求无效

6 个答案: