請求標頭字段Access-Control-Allow-Headers在預檢響應中本身是不允許的

Question

我遇到過多次CORS問題，通常可以解決它，但我想通過從MEAN堆棧範例中看到這一點來真正理解它。

在我簡單地在我的快速服務器中添加中間件來捕獲這些內容之前，它看起來像是某種預鉤使我的請求錯誤。

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

我認爲我能做到這一點：

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Headers","*") 
}) 

或等值但這似乎並沒有解決它。我當然也試過

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers") 
}) 

還是沒有運氣。

Answer 1

當您開始使用自定義請求標頭時，您將獲得CORS預檢。這是一個請求，它使用HTTP OPTIONS動詞幷包含若干標題，其中一個是Access-Control-Request-Headers，列出了客戶端希望包含在請求中的標題。

您需要使用相應的CORS標題回覆該CORS預檢才能使其工作。其中之一的確是Access-Control-Allow-Headers。該標題需要包含Access-Control-Request-Headers標題包含的相同值（或更多）。

https://fetch.spec.whatwg.org/#http-cors-protocol更詳細地解釋了此設置。

Answer 2

這是你需要添加，使其工作。

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

瀏覽器發送一個預檢請求（具有方法類型OPTIONS），以檢查是否該服務器上的所述服務允許被從瀏覽器上的不同的域訪問。爲了響應預檢請求，如果你注入了上面的頭文件，瀏覽器就會明白，進行進一步的調用是可以的，我將得到對我實際的GET/POST調用的有效響應。您可以通過使用Access-Control-Allow-Origin「，」localhost，xvz.com「而不是*來約束授予訪問權限的域。（*將授予對所有域的訪問權限）

Answer 3

此問題通過

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

特別是在我的項目（express.js /的NodeJS）

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); 
    next(); 
}); 

更新：

每次錯誤：Access-Control-Allow-Headers is not allowed by itself in preflight response錯誤你可以看到什麼錯chrome developer tool：

上述錯誤缺少Content-Type所以加串Content-Type到Access-Control-Allow-Headers

Answer 4

要添加到其他的答案。我有同樣的問題，這是我在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標頭，然後用我的正常路線繼續。當有OPTIONS請求時，它只響應CORS標題。

Answer 5

接受的答案是好的，但我很難理解它。所以這裏有一個簡單的例子來澄清它。

在我的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**'); 

Answer 6

我想補充的是，你可以把這些標題也的WebPack配置文件。當我運行webpack dev服務器時，我需要它們。

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

Answer 7

我只是遇到這個問題我自己，在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> 

通知爲Access-Control-Allow-Headers授權值鍵。我錯過了授權值，這個配置解決了我的問題。

Answer 8

在Chrome中：

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

對於我來說，這個錯誤是由尾隨空間在這個調用的URL觸發。

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

Answer 9

非常好，我用這個在硅石項目

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

Answer 10

這同樣的問題我面臨。

我做了一個簡單的改變。

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