Question

我尝试使用发布请求将文件发送到我的服务器，但是当它发送时会导致错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

所以我用Google搜索了错误并添加了标题：

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

然后我收到错误：

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers

所以我用谷歌搜索了那个，我能找到的唯一类似的问题提供了一个半答案然后关闭作为主题。我应该添加/删除哪些标题？

Answer 1

我遇到了同样的问题。 In the jQuery documentation我找到了：

对于跨域请求，将内容类型设置为application/x-www-form-urlencoded，multipart/form-data或text/plain以外的任何内容都将触发浏览器向服务器发送预检OPTIONS请求。 / p>

因此虽然服务器允许交叉原始请求但不允许Access-Control-Allow-Headers，但它会抛出错误。默认情况下，角度内容类型为application/json，它尝试发送OPTION请求。尝试覆盖角度默认标头或在服务器端允许Access-Control-Allow-Headers。这是一个有角度的样本：

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

Answer 2

服务器（发送POST请求）需要在其响应中包含Access-Control-Allow-Headers标题（等）。将它们放入客户的请求中无效。

这是因为由服务器指定它接受跨源请求（并且它允许Content-Type请求标头等等） - 客户端无法自行决定给定服务器应该允许CORS。

Answer 3

如果这有助于任何人，即使是这种穷人，因为我们必须只允许这个用于开发目的，这是一个Java解决方案，因为我遇到了同样的问题。 [编辑]不要使用外卡*，因为它是一个糟糕的解决方案，如果你真的需要一些在本地工作的东西，请使用localhost。

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

Answer 4

服务器（发送POST请求）需要在其响应中包含 Content-Type 标头。

以下是要包含的典型标头列表，包括一个自定义“X_ACCESS_TOKEN”标头：

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

这就是您的http服务器人员需要为您发送请求的Web服务器配置的内容。

您可能还想让服务人员公开“Content-Length”标题。

他会将此视为跨域资源共享（CORS）请求，并且应该了解进行这些服务器配置的含义。

详见：

Answer 5

以下适用于nodejs：

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

Answer 6

您可以使用以下方法在PHP中激活适当的标头：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

Answer 7

您尝试设置的标头是响应标头。它们必须在响应中由您提出请求的服务器提供。

他们没有在客户端上设置。如果可以通过想要权限的站点而不是拥有数据的站点授予权限，那么拥有授予权限的方法毫无意义。

Answer 8

如果有人在使用快速服务器时遇到此问题，请添加以下中间件

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 9

如果您在pc或Mac上的chrome中测试了对ionic2或angularjs 2的一些javascript请求，那么请确保为chrome浏览器安装CORS插件以允许交叉来源。

mayba获取请求将无需工作，但发布和放置和删除将需要您安装cors插件进行测试，没有问题，definitley不酷，但我不知道人们如何做没有CORS插件。

并且还要确保json响应没有通过某些json状态返回400

Answer 10

这是后端问题。如果在后端使用sails api更改cors.js并在此处添加您的文件

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

Answer 11

如果您使用localhost并将PHP设置为此，则可以解决此问题：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');

从前端使用：

{headers: {"Content-Type": "application/json"}}

并且没有localhost发出的更多问题！

Answer 12

在我的情况下，我将@HeaderParam中的几个参数作为Web服务方法接收。

这些参数必须以这样的方式在CORS过滤器中声明：

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

Answer 13

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers错误表示响应不处理或不允许HTTP标头的Access-Control-Allow-Origin字段。从请求标头中删除Access-Control-Allow-Origin字段。

Answer 14

在 Asp Net Core 中，可以使其快速用于开发；在Startup.cs中，Configure method添加

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

Answer 15

对我来说，将以下内容添加到服务器的web.config文件中：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://other.domain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

Answer 16

对我来说，我在 "*" 中有通配符 web.config Access-Control-Allow-Headers：

<add name="Access-Control-Allow-Headers" value="*" />

此解决方案适用于大多数导航器但不适用于 Safari 或 IE

事实证明，解决方案是手动将所有自定义标头添加到 web.config：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://somedomain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="custom-header1, custome-header2, custome-header3" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Headers

16 个答案: