Fatal编程技术网
  • express/
  • Express 飞行前响应中自身不允许请求标头字段访问控制允许标头

Express 飞行前响应中自身不允许请求标头字段访问控制允许标头

express cors

Express 飞行前响应中自身不允许请求标头字段访问控制允许标头,express,cors,meanjs,Express,Cors,Meanjs,我曾多次遇到CORS问题，通常可以解决它，但我想通过从平均堆栈范例中看到这一点来真正理解它 在我简单地在我的express服务器中添加中间件来捕获这些东西之前，但是看起来好像有某种预钩子在错误地处理我的请求 飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许标头 我认为我可以做到这一点： app.use（函数（请求、恢复、下一步）{ res.header（“访问控制允许头”，“*”） }) 或者类似的，但这似乎不能解决问题。我当然也试过了 app.use（函数（请求、恢复、下一步）{

我曾多次遇到CORS问题，通常可以解决它，但我想通过从平均堆栈范例中看到这一点来真正理解它

在我简单地在我的express服务器中添加中间件来捕获这些东西之前，但是看起来好像有某种预钩子在错误地处理我的请求

飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许标头

我认为我可以做到这一点：

app.use（函数（请求、恢复、下一步）{
res.header（“访问控制允许头”，“*”）
})
或者类似的，但这似乎不能解决问题。我当然也试过了

app.use（函数（请求、恢复、下一步）{
res.header（“访问控制允许标头”、“访问控制允许标头”）
})
仍然不走运。

当您开始使用自定义请求头时，您将获得CORS预飞行。这是一个使用HTTP
OPTIONS
动词的请求，包含多个头，其中一个是
Access-Control-request-headers
，列出了客户端希望包含在请求中的头

您需要使用适当的CORS头来回复CORS预飞行，以使此工作正常。其中之一确实是
访问控制允许标头
。该标头需要包含与
访问控制请求标头所包含的值相同的值（或更多）


更详细地解释此设置。
这是您需要添加的内容，以使其正常工作


response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");



浏览器发送飞行前请求（带有方法类型选项），以检查是否允许从其他域的浏览器访问服务器上承载的服务。在响应飞行前请求时，如果您插入上述标题，浏览器会理解可以进行进一步调用，并且我将获得对实际get/POST调用的有效响应。您可以使用access Control Allow Origin、“localhost，xvz.com”而不是*（*将授予对所有域的访问权）来约束授予访问权的域。
此问题已通过解决


 "Origin, X-Requested-With, Content-Type, Accept, Authorization"


特别是在我的项目中（express.js/nodejs）

更新：

每次错误：
Access Control Allow Headers在飞行前响应中自身不允许出现
error您可以看到有什么问题：




上面的错误缺少
内容类型
，因此将字符串
内容类型
添加到
访问控制允许标题
以添加到其他答案。我遇到了相同的问题，这是我在express服务器中用于允许REST调用的代码：


app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if ('OPTIONS' == req.method) {
  res.sendStatus(200);
  } else {
    next();
  }
});


这段代码基本上是截取所有请求并添加CORS头，然后继续我的正常路由。当有选项请求时，它只响应CORS头


编辑：我对同一台机器上的两个单独的nodejs express服务器使用了此修复程序。最后，我用一个简单的代理服务器修复了问题。
接受的答案是可以的，但我很难理解它。因此，这里有一个简单的示例来说明它

在我的ajax请求中，我有一个标准的授权头


$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
    var xhr = e.detail.xhr;

    xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}


此代码产生问题中的错误。我在nodejs服务器中必须做的是在允许的标题中添加授权：


res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');



只需补充一点，您可以将这些标题也放在Webpack配置文件中。我需要它们，就像我运行Webpack dev server时一样


devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
      "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    }
},



我自己也遇到过这个问题，在ASP.NET的上下文中，请确保您的Web.config如下所示：


  <system.webServer>
<modules>
  <remove name="FormsAuthentication" />
</modules>

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <!--<remove name="OPTIONSVerbHandler"/>-->
  <remove name="TRACEVerbHandler" />
  <!--
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  -->
</handlers>

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>








请注意
访问控制允许标头的授权值。我缺少授权值，此配置解决了我的问题。
在Chrome中：

请求标头字段X-Requested-With不允许由
访问控制允许飞行前响应中的标头

对我来说，这个错误是由这个调用的URL中的一个尾随空格触发的


jQuery.getJSON( url, function( response, status, xhr ) {
   ...
}



很好，我在silex项目中使用了这个


$app->after(function (Request $request, Response $response) {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set("Access-Control-Allow-Credentials", "true");
        $response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
        $response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    });



我也面临同样的问题

我做了一个简单的改变


  <modulename>.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});



.config（函数（$httpProvider）{
删除$httpProvider.defaults.headers.common['X-Requested-With']；
});

当我们为请求创建自定义标头时，会出现此问题。此请求使用
HTTP选项并包含多个标头

此请求所需的头是
访问控制请求头
，它应该是响应头的一部分，并且应该允许来自所有来源的请求。有时它需要
内容类型以及响应头。因此，您的响应头应该是这样的-


response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");



res.setHeader（'Access-Control-Allow-Headers'，'*'）；
我收到了OP使用Django、React和Django cors Headers库声明的错误。要使用此堆栈修复此错误，请执行以下操作：

在settings.py中，根据添加以下内容


消息很清楚，API中不允许“授权”。设置


访问控制允许标题：“内容类型，授权”
我在Angular 6中也遇到了同样的问题。我使用下面的代码解决了这个问题。将代码添加到component.ts文件中


import { HttpHeaders } from '@angular/common/http';

headers;

constructor() {
    this.headers = new HttpHeaders();
    this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}

getData() {
    this.http.get(url,this.headers). subscribe (res => {
    // your code here...
})}



花了将近一天的时间，我才发现添加以下两个代码解决了我的问题

将其添加到Global.asax中


protected void Application_BeginRequest()
{
  if (Request.HttpMethod == "OPTIONS")
  {
    Response.StatusCode = (int)System.Net.HttpStatusCode.OK;             
    Response.End();
  }
}


并在web配置中添加以下内容


<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />        
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
  </customHeaders>
</httpProtocol>



在Post API调用中，我们将在请求正文中发送数据。因此，如果我们将通过向API调用添加任何额外的头来发送数据，则将发生第一个OPTIONS API调用，然后发生Post调用。因此，您必须先处理OPTIONS API调用

您可以通过编写一个过滤器来处理此问题，并在其中检查option call API调用并返回200 OK状态。下面是示例代码：


package com.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

public class CustomFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(Response.SC_OK);
        }
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
        // TODO
    }

    public void destroy() {
        // Todo
    }

}



如果您试图在请求标头上添加自定义标头，则

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />        
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
  </customHeaders>
</httpProtocol>



package com.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

public class CustomFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(Response.SC_OK);
        }
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
        // TODO
    }

    public void destroy() {
        // Todo
    }

}



const express = require('express')
const cors = require('cors')
const app = express()

app.get('/with-cors', cors(), (req, res, next) => {
  res.json({ msg: 'WHOAH with CORS it works! add this headers into your ajax or js function


headers: {
            "Cache-Control": null,
            "X-Requested-With": null,
        }