18

I have a website with REST Api and now I´m creating a browser extension, which will collect data from some pages and send them back to the REST Api. Because I want my extension to be compatible with both firefox and chrome, and to be easily maintainable, I´m injecting the actual code into page as a script tag, which is then executed like normal javascript. I´m currently working only on chrome version of the extension and I´ve run into a problem:

When I´m trying to send my data to the api (PATCH request), chrome won´t let me saying:

XMLHttpRequest cannot load http://my.rest/api. Origin http://website.com is not allowed by Access-Control-Allow-Origin.

I have the Access-Control-Allow-Headers, Methods and Origin all set to proper values, but it still doesn´t work. It works with GET requests though. I´ve also tried POST and PUT request but those don´t work either.

Here are my headers:

Request:

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

Response:

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

I´ve also tried setting Access-Control-Allow-Origin to exactly same value as Origin header, but it didn´t work. Furthemore it seems to be working in Firefox. I have Chrome 27, which should be up-to-date.

4

6 回答 6

12

node.js我在使用 CORS时遇到了类似的问题

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

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

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

此外，您可以将Access-Control-Allow-Methods标题设置为选项列表，例如：

POST, GET, OPTIONS, DELETE, PUT
于 2013-07-09T23:46:13.343 回答
11

您应该在响应标头中允许 OPTIONS ..

“访问控制允许方法”、“GET、POST、HEAD、OPTIONS、PUT、DELETE”

于 2013-07-12T17:20:30.303 回答
0

我在 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 服务端为每个请求设置以下响应标头：

  1. ("Access-Control-Allow-Headers", "Accept") 或 ("Access-Control-Allow-Headers", HTTPRequest.RequestedHeaders + "Accept")

  2. （“访问控制允许方法”、“POST、PUT、GET”）

  3. （“访问控制允许来源”，“*”）

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

于 2013-07-13T12:07:08.597 回答
0

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

于 2021-04-09T08:53:01.770 回答
0

在您的 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

}

控制器或操作 -如果需要/需要在这些级别放置支持（这将覆盖全局设置- 操作 > 控制器 > 配置）。以上控制器或动作签名：

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

注意： * 是“通配符”，可能想把提出请求的域放在前：( http ://localhost:[ port # ])

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

在解决方案资源管理器中，右键单击 api-project。在属性窗口中将“匿名身份验证”设置为已启用！！！

于 2017-05-16T15:52:02.690 回答
-3

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

于 2017-10-07T07:25:54.510 回答