我正在尝试使用发布请求将文件发送到我的服务器,但是当它发送时会导致错误:
Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。
所以我用谷歌搜索了错误并添加了标题:
$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"
}
然后我得到错误:
Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin
所以我用谷歌搜索,我能找到的唯一类似问题是提供了一个半答案,然后作为离题关闭。我应该添加/删除哪些标题?
我有同样的问题。 In the jQuery documentation 我发现:
对于跨域请求,将内容类型设置为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 以外的任何内容都会触发浏览器向服务器发送预检 OPTIONS 请求。
所以虽然服务器允许跨域请求但不允许 Access-Control-Allow-Headers
,它会抛出错误。默认情况下,角度内容类型是 application/json
,它正在尝试发送 OPTION 请求。尝试覆盖 Angular 默认标头或在服务器端允许 Access-Control-Allow-Headers
。这是一个角度示例:
$http.post(url, data, {
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
服务器(POST 请求被发送到)需要在其响应中包含 Access-Control-Allow-Headers
标头(等)。将它们放入来自客户的请求中没有任何效果。您应该从 POST 请求中删除“Access-Control-Allow-...”标头。
这是因为由服务器指定它接受跨域请求(并且它允许 Content-Type
请求标头等)——客户端无法自行决定给定服务器是否应该允许 CORS。
请求者(网络浏览器)可以通过发送“OPTIONS”请求(即不是您想要的“POST”或“GET”请求)“预检”测试服务器的同源策略是什么。如果对“OPTIONS”请求的响应包含“Access-Control-Allow-...”标头,允许您的请求使用的标头、来源或方法,则请求者/浏览器将发送您的“POST”或“GET” ' 要求。
(晦涩的注释:) Access-Control-Allow-... 具有值 '' 而不是列出允许的特定来源、标头或方法。但是,我使用的旧 Android WebView 客户端不支持 '' 通配符,并且需要在响应 OPTIONS 请求的 Access-Control-Allow-Headers 标头中列出的特定标头。
Content-Type
?
如果这对任何人都有帮助(即使这有点糟糕,因为我们必须只允许它用于开发目的)这是一个 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() {}
}
服务器(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) 请求,并且应该了解进行这些服务器配置的含义。
详情见:
http://www.w3.org/TR/cors/
http://enable-cors.org/
您可以使用以下方法在 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");
以下适用于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();
});
如果您使用 localhost
并且 PHP 设置为此来解决问题:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
从您的前端使用:
{headers: {"Content-Type": "application/json"}}
并且没有更多来自 localhost
的问题!
在Asp Net Core中,快速让它为开发工作;在 Startup.cs
,Configure method
添加
app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
您尝试设置的标头是响应标头。它们必须由您发出请求的服务器在响应中提供。
在客户端上没有设置它们的位置。如果权限可以由需要权限的站点而不是拥有数据的站点授予,那么拥有授予权限的方法将毫无意义。
如果有人在使用 express 服务器时遇到此问题,请添加以下中间件
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
如果您在 pc 或 mac 上的 chrome 中测试 ionic2 或 angularjs 2 的一些 javascript 请求,请确保为 chrome 浏览器安装 CORS 插件以允许跨源。
mayba get requests 不需要它就可以工作,但是 post 和 puts 和 delete 将需要您安装 cors 插件以进行测试以顺利进行,这 definitley 并不酷,但我不知道人们如何在没有 CORS 插件的情况下做到这一点。
并确保 json 响应不会通过某些 json 状态返回 400
这是后端问题。如果在后端更改 cors.js 上使用sails api并在此处添加您的文件
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'
};
就我而言,我将几个参数作为 @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");
}
}
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers
错误表示响应未处理或允许 HTTP 标头的 Access-Control-Allow-Origin
字段。从请求标头中删除 Access-Control-Allow-Origin
字段。
对我来说,在我的服务器的 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
https://i.stack.imgur.com/tiXxd.png
事实证明,解决方案是将所有自定义标头手动添加到 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>
不定期副业成功案例分享
or allow Access-Control-Allow-Headers in server end
怎么样?header
来设置响应的标题