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

你要设置的头文件是响应头文件。它们必须在响应中由您发出请求的服务器提供。

在客户端上没有设置它们的位置。如果可以由想要权限的站点而不是拥有数据的站点授予权限，那么使用一种授予权限的方法是毫无意义的。

服务器 (POST请求被发送到的对象)需要包含Access-Control-Allow-Headers报头(等)在回应中。将它们放在客户端的请求中是没有效果的。您应该删除“Access-Control-Allow-…”从你的POST请求。

这是因为由服务器来指定它是否接受跨源请求(以及它是否允许Content-Type请求头等等)——客户端不能自己决定给定的服务器是否应该允许CORS。

请求者(web浏览器)可以通过发送一个“OPTIONS”请求(即不是你想要的“POST”或“GET”请求)来“preflight”测试服务器的同源策略。如果对'OPTIONS'请求的响应包含'Access-Control-Allow-…'头，允许你的请求使用的头，来源或方法，然后请求者/浏览器将发送你的'POST'或'GET'请求。

(模糊的注释:)Access-Control-Allow-…具有值'，而不是列出具体的来源、头文件或允许的方法。但是，我使用的旧Android WebView客户端不支持'通配符，并且需要在OPTIONS请求的响应中的Access-Control-Allow-Headers头中列出的特定头。

服务器(POST请求被发送到的服务器)需要在其响应中包含内容类型报头。

下面是一个典型的报头列表，包括一个自定义的“X_ACCESS_TOKEN”报头:

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

这就是你的http server需要为你发送请求的web服务器配置的东西。

你可能还想让你的服务器人员公开“Content-Length”报头。

他会认为这是一个跨源资源共享(CORS)请求，并且应该理解进行这些服务器配置的含义。

详情见:

• http://www.w3.org/TR/cors/ < a href = " http://www.w3.org/TR/cors/ " > < / >
• http://enable-cors.org/ < a href = " http://enable-cors.org/ " > < / >

我也有同样的问题。在jQuery文档中我发现:

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

因此，尽管服务器允许跨源请求，但不允许Access-Control-Allow-Headers，它将抛出错误。默认情况下，angular的内容类型是application/json，它试图发送一个OPTION请求。尝试覆盖angular默认头文件或在服务器端允许Access-Control-Allow-Headers。下面是一个角度的例子:

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

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() {}


}

以下是我使用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();
});

在我的例子中，我将几个参数作为@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");
}
}

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

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

如果你测试一些针对ionic2或angularjs 2的javascript请求，在你的chrome上的pc或mac上，然后确保你为chrome浏览器安装了CORS插件，以允许跨源。

也许不需要cors, get请求就可以工作，但是post、put和delete需要你安装cors插件进行测试，这肯定不酷，但我不知道没有cors插件人们是如何做到的。

还要确保json响应不会返回400

这是后台问题。如果在后端使用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'
};

你可以在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");

在Asp Net Core中，为了快速地让它为开发工作;在Startup.cs中，Configure method添加

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

如果你正在使用localhost并且PHP设置为这个来解决这个问题:

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

从您的前端使用:

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

和boom没有更多的问题localhost!

对我来说，在服务器的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>

对于我来说，我在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>