Trường tiêu đề yêu cầu Access-Control-Allow-Headers không được phép tự nó trong phản hồi preflight

262
mibbit 2015-09-11 01:01.

Tôi đã gặp sự cố CORS nhiều lần và thường có thể khắc phục được nó nhưng tôi muốn thực sự hiểu bằng cách xem điều này từ mô hình ngăn xếp MEAN.

Trước khi tôi chỉ cần thêm phần mềm trung gian vào máy chủ express của mình để bắt những thứ này, nhưng có vẻ như có một số loại móc nối trước đang thực hiện sai yêu cầu của tôi.

Trường tiêu đề yêu cầu Access-Control-Allow-Headers không được Access-Control-Allow-Headers cho phép trong phản hồi preflight

Tôi cho rằng tôi có thể làm được điều này:

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

hoặc tương đương nhưng điều này dường như không khắc phục được. Tất nhiên tôi cũng đã thử

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

Vẫn không có may mắn.

19 answers

268
Anne 2015-09-11 02:02.

Khi bạn bắt đầu chơi với các tiêu đề yêu cầu tùy chỉnh, bạn sẽ nhận được một CORS preflight. Đây là một yêu cầu sử dụng OPTIONSđộng từ HTTP và bao gồm một số tiêu đề, một trong số đó đang Access-Control-Request-Headersliệt kê các tiêu đề mà khách hàng muốn đưa vào yêu cầu.

Bạn cần phải trả lời CORS trước đó với các tiêu đề CORS thích hợp để làm cho việc này hoạt động. Một trong số đó thực sự là Access-Control-Allow-Headers. Tiêu đề đó cần phải chứa các giá trị giống như Access-Control-Request-Headerstiêu đề chứa (hoặc nhiều hơn).

https://fetch.spec.whatwg.org/#http-cors-protocol giải thích thiết lập này chi tiết hơn.

129
manish arora 2016-05-15 05:14.

Đây là những gì bạn cần thêm để làm cho nó hoạt động.

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

Trình duyệt gửi yêu cầu preflight (với loại phương thức OPTIONS) để kiểm tra xem dịch vụ được lưu trữ trên máy chủ có được phép truy cập từ trình duyệt trên một miền khác hay không. Đáp lại yêu cầu preflight nếu bạn đưa vào các tiêu đề phía trên, trình duyệt hiểu rằng có thể thực hiện thêm các cuộc gọi và tôi sẽ nhận được phản hồi hợp lệ cho cuộc gọi GET / POST thực tế của mình. bạn có thể giới hạn miền mà quyền truy cập được cấp bằng cách sử dụng Access-Control-Allow-Origin "," localhost, xvz.com "thay vì *. (* sẽ cấp quyền truy cập cho tất cả các miền)

88
nguyên 2016-07-08 19:02.

Vấn đề này được giải quyết với

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

Đặc biệt trong dự án của tôi (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();
});

Cập nhật:

Mỗi lần lỗi: Access-Control-Allow-Headers is not allowed by itself in preflight responselỗi, bạn có thể thấy lỗi với công cụ nhà phát triển chrome :

lỗi ở trên bị thiếu Content-Typevì vậy hãy thêm chuỗi Content-TypevàoAccess-Control-Allow-Headers

14
user732456 2016-09-10 10:35.

Câu trả lời được chấp nhận là ok, nhưng tôi gặp khó khăn để hiểu nó. Vì vậy, đây là một ví dụ đơn giản để làm rõ nó.

Trong yêu cầu ajax của mình, tôi có tiêu đề Ủy quyền tiêu chuẩn.

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

Mã này tạo ra lỗi trong câu hỏi. Những gì tôi phải làm trong máy chủ nodejs của mình là thêm Ủy quyền trong các tiêu đề được phép:

res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');
7
Luke Kroon 2016-07-13 22:01.

Để thêm vào các câu trả lời khác. Tôi đã gặp vấn đề tương tự và đây là mã tôi đã sử dụng trong máy chủ express của mình để cho phép các cuộc gọi 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();
  }
});

Những gì mã này về cơ bản là chặn tất cả các yêu cầu và thêm tiêu đề CORS, sau đó tiếp tục với các tuyến đường bình thường của tôi. Khi có yêu cầu TÙY CHỌN, nó chỉ phản hồi với các tiêu đề CORS.

CHỈNH SỬA: Tôi đang sử dụng bản sửa lỗi này cho hai máy chủ nodejs express riêng biệt trên cùng một máy. Cuối cùng, tôi đã khắc phục được sự cố với một máy chủ proxy đơn giản.

5
Josh Siegl 2017-03-08 17:33.

Tôi vừa gặp sự cố này, trong bối cảnh của ASP.NET, hãy đảm bảo rằng Web.config của bạn trông giống như sau:

  <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>

Lưu ý giá trị Ủy quyền cho Access-Control-Allow-Headerskhóa. Tôi đã thiếu giá trị Ủy quyền, cấu hình này giải quyết vấn đề của tôi.

5
Al Kativo 2017-06-20 22:56.

Rất tốt, tôi đã sử dụng cái này trong một dự án 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");
    });
4
user3248255 2017-03-15 04:12.

Trong Chrome:

Trường tiêu đề yêu cầu X-Request-With không được Access-Control-Allow-Headers cho phép trong phản hồi preflight.

Đối với tôi, lỗi này được kích hoạt bởi một dấu cáchcuối trong URL của lệnh gọi này.

jQuery.getJSON( url, function( response, status, xhr ) {
   ...
}
4
Kanomdook 2018-07-02 21:48.

res.setHeader ('Access-Control-Allow-Headers', '*');

3
Eric 2018-09-29 05:46.

Tôi đã nhận được lỗi mà OP đã nêu bằng cách sử dụng Django, React và lib django-cors-headers. Để khắc phục sự cố với ngăn xếp này, hãy làm như sau:

Trong settings.py thêm phần bên dưới theo tài liệu chính thức .

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)
3
Janne 2017-02-22 04:08.

Chỉ cần thêm rằng bạn có thể đặt các tiêu đề đó vào tệp cấu hình Webpack. Tôi cần chúng như trong trường hợp của tôi khi tôi đang chạy máy chủ 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"
    }
},
2
Kristina Mojanovska 2019-12-18 10:12.

Nếu bạn đang cố gắng thêm tiêu đề tùy chỉnh trên tiêu đề yêu cầu, bạn phải cho máy chủ biết rằng tiêu đề cụ thể được phép thực hiện. Nơi để làm điều đó là trong lớp lọc các yêu cầu. Trong ví dụ được hiển thị bên dưới, tên tiêu đề tùy chỉnh là "loại":

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin",  request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization, type ");
        response.setHeader("Access-Control-Expose-Headers","Authorization");
    }
}
2
Sai prateek 2018-06-18 21:59.

sự cố này xảy ra khi chúng tôi tạo tiêu đề tùy chỉnh cho yêu cầu. Yêu cầu này sử dụng HTTP OPTIONSvà bao gồm một số tiêu đề.

Tiêu đề bắt buộc cho yêu cầu này Access-Control-Request-Headersphải là một phần của tiêu đề phản hồi và phải cho phép yêu cầu từ tất cả nguồn gốc. Đôi khi nó cũng cần Content-Typetrong tiêu đề phản hồi. Vì vậy, tiêu đề phản hồi của bạn phải như vậy -

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");
2
Biruk Belihu 2018-10-26 09:27.

Sau gần một ngày, tôi mới phát hiện ra rằng việc thêm hai mã bên dưới đã giải quyết được vấn đề của tôi.

Thêm điều này vào Global.asax

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

và trong cấu hình web, hãy thêm phần bên dưới

<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>
1
Noname 2019-07-15 05:39.

Trong lệnh gọi API Đăng, chúng tôi đang gửi dữ liệu trong phần thân yêu cầu. Vì vậy, nếu chúng tôi sẽ gửi dữ liệu bằng cách thêm bất kỳ tiêu đề bổ sung nào vào lệnh gọi API. Sau đó, lệnh gọi API OPTIONS đầu tiên sẽ xảy ra và sau đó cuộc gọi đăng sẽ xảy ra. Do đó, bạn phải xử lý lệnh gọi API TÙY CHỌN trước.

Bạn có thể xử lý vấn đề bằng cách viết một bộ lọc và bên trong đó bạn phải kiểm tra lệnh gọi API tùy chọn và trả về trạng thái 200 OK. Dưới đây là mã mẫu:

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
    }

}
1
Karthi The Programmer 2018-10-25 19:40.

Tôi cũng gặp phải vấn đề tương tự trong Angular 6. Tôi đã giải quyết vấn đề bằng cách sử dụng mã bên dưới. Thêm mã vào tệp 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...
})}
0
Shashikant Pandit 2017-07-05 23:04.

Đó cũng là vấn đề mà tôi đang phải đối mặt.

Tôi đã làm một thay đổi đơn giản.

  <modulename>.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
0
Rajesh Yadav 2018-10-23 00:05.

Thông báo rõ ràng rằng 'Ủy quyền' không được phép trong API. Đặt
Access-Control-Allow-Headers: "Content-Type, Authorization"

0
Ayman OUKACHA 2020-06-02 13:49.
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! 🔝 🎉' })
})

Thêm cors trong hàm get Có phải là điều làm việc cho tôi

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language