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

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

提问by user3194367

I'm trying to send files to my server with a post request, but when it sends it causes the error:

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

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

Access-Control-Allow-Headers 不允许请求头字段 Content-Type。

So I googled the error and added the headers:

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

$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"
}

Then I get the error:

然后我得到错误：

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

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

So I googled that and the only similar question I could find was provided a half answer then closed as off topic. What headers am I supposed to add/remove?

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

采纳答案by Shai

The server(that the POST request is sent to) needs to include the Access-Control-Allow-Headersheader (etc) in its response. Putting them in your request from the client has no effect.

的服务器（即POST请求被发送到）需要包括Access-Control-Allow-Headers报头（等）在它的响应。将它们放入客户的请求中无效。

This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Typerequest header, and so on) – the client cannot decide for itself that a given server should allow CORS.

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

回答by Fisherman

I had the same problem. In the jQuery documentationI found:

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

For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plainwill trigger the browser to send a preflight OPTIONS request to the server.

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

So though the server allows cross origin request but does not allow Access-Control-Allow-Headers, it will throw errors. By default angular content type is application/json, which is trying to send a OPTION request. Try to overwrite angular default header or allow Access-Control-Allow-Headersin server end. Here is an angular sample:

因此，尽管服务器允许跨源请求但不允许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'
    }
});

回答by lekant

If that helps anyone, (even if this is kind of poor as we must only allow this for dev purpose) here is a Java solution as I encountered the same issue. [Edit] Do not use the wild card * as it is a bad solution, use localhostif you really need to have something working locally.

如果这对任何人有帮助，（即使这有点糟糕，因为我们只能出于开发目的才允许这样做）这是一个 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() {}

}

回答by l3x

The server (that the POST request is sent to) needs to include the Content-Typeheader in its response.

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

Here's a list of typical headers to include, including one custom "X_ACCESS_TOKEN" header:

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

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

That's what your http server guy needs to configure for the web server that you're sending your requests to.

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

You may also want to ask your server guy to expose the "Content-Length" header.

您可能还想请您的服务器人员公开“Content-Length”标头。

He'll recognize this as a Cross-Origin Resource Sharing (CORS) request and should understand the implications of making those server configurations.

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

For details see:

详情请见：

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

回答by Vinod Dhakad

You can activate the proper header in PHP with this:

您可以使用以下方法在 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");

回答by Fernando Gabrieli

The following works for me with nodejs:

以下内容适用于 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();
});

回答by Quentin

The headers you are trying to set are responseheaders. They have to be provided, in the response, by the server you are making the request to.

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

They have no place being set on the client. It would be pointless having a means to grant permissions if they could be granted by the site that wantedpermission instead of the site that owned the data.

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

回答by realappie

If anyone experiences this problem with an express server, add the following middleware

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

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

回答by albaiti

if you testing some javascript requests for ionic2 or angularjs 2 , in your chrome on pc or mac , then be sure that you install CORS plugin for chrome browser to allow cross origin .

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

mayba get requests will work without needing that , but post and puts and delete will need you to install cors plugin for testing to go without problems , that definitley not cool , but i do not know how people do it without CORS plugin .

mayba get requests 不需要那个就可以工作，但是 post 和 puts 和 delete 需要你安装 cors 插件进行测试才能没有问题，这definitley不酷，但我不知道没有CORS插件的人是怎么做的。

and also be sure the json response is not returning 400 by some json status

并确保 json 响应不会通过某些 json 状态返回 400

回答by Sedat Y

this is backend problem. if use sails api on backend change cors.js and add your filed here

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