Access-Control-Allow-Headers不允许访问控制 – 允许 – 标题

我试图发送文件到我的服务器与发布请求,但是当它发送导致错误:

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 

所以我search了这个,我能find的唯一类似的问题是提供了一半的答案,然后closures作为题外话。 我应该添加/删除什么标题?

服务器 (发送POST请求)需要在其响应中包含Access-Control-Allow-Headers头(等)。 把它们放在客户端的请求中没有任何影响。

这是因为服务器要指定它接受跨源请求(并且它允许Content-Type请求头,等等) – 客户端不能自己决定给定的服务器应该允许CORS。

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

对于跨域请求,将内容types设置为除application/x-www-form-urlencodedmultipart/form-datatext/plain将触发浏览器向服务器发送预检OPTIONS请求。

所以虽然服务器允许交叉来源请求但不允许Access-Control-Allow-Headers ,它会抛出错误。 默认的angular度内容types是application/json ,它试图发送一个OPTION请求。 尝试覆盖angular度默认标题或允许在服务器端Access-Control-Allow-Headers 。 这是一个angular度样本:

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

如果这有助于任何人,即使是这样的穷人,我们只能将其用于开发目的,这是一个Java解决scheme,因为我遇到了同样的问题。 请注意,通配符*不是一个好的解决scheme,但有时您没有其他select。

 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", "*"); 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() {} } 

服务器(发送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服务器进行configuration。

您可能还想要问您的服务器人揭露“Content-Length”标题。

他会认识到这是一个跨源资源共享(CORS)请求,应该理解这些服务器configuration的含义。

详情请参阅:

您尝试设置的标题是响应标题。 他们必须在提供请求的服务器的响应中提供。

他们没有在客户端设置的地方。 如果可以由需要许可的站点而不是拥有数据的站点来授予权限,那就没有任何意义。

下面的代码适用于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(); }); 

如果有人遇到快速服务器的这个问题,请添加以下中间件

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

如果你testing一些JavaScript的ionic2或者angularjs2的请求,在你的PC或者Mac上的chrome中,那么确保你安装了铬浏览器的CORS插件来允许跨源。

mayba get请求将无需工作,但是post和put和delete会需要你安装cors插件来testing没有问题,definitley不是很酷,但我不知道人们是如何做到的,没有CORS插件。

也可以肯定的是,json响应不会以某种json状态返回400

在我的情况下,我收到几个参数作为@HeaderParam到一个Web服务方法。

这些参数必须在你的CORSfilter中声明:

 @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"); } } 

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