Запити заголовкового поля Access-Control-Allow-Headers не дозволено заголовками Access-Control-Allow-Headers

Я намагаюся надсилати файли на свій сервер із запитом на публікацію, але коли він надсилає, викликає помилку:

Запит заголовка поля Вміст-тип не дозволений Access-Control-Allow-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"
}

Тоді я отримую помилку:

Запити заголовкового поля Access-Control-Allow-Origin заборонено для заголовків Access-Control-Allow-Headers

Тож я погуглив це, і єдине подібне питання, яке я міг знайти, було надано половинну відповідь, а потім закрите як поза темою. Які заголовки я повинен додати / видалити?

Сервер (що запит POST відправляється) має включати в себе Access-Control-Allow-Headersзаголовок ( і т.д.) в своїй відповіді . Внесення їх у свій запит від клієнта не впливає.

Це пояснюється тим, що сервер повинен вказати, що він приймає запити крос-походження (і що він дозволяє Content-Typeзаголовку запиту тощо) - клієнт не може вирішити для себе, що даний сервер повинен дозволити CORS.

У мене була така ж проблема. У документації jQuery я знайшов:

Для крос-доменних запитів, які задають тип вмісту нічого, крім application/x-www-form-urlencoded, multipart/form-dataабо text/plainзапустить браузер для відправки передпольотний OPTIONS - запит на сервер.

Тож хоч сервер дозволяє запит перехресного походження, але не дозволяє Access-Control-Allow-Headers, він видасть помилки. За замовчуванням тип кутового вмісту є application/json, який намагається надіслати запит OPTION. Спробуйте перезаписати кутовий заголовок за замовчуванням або дозволити його Access-Control-Allow-Headersв кінці сервера. Ось кутовий зразок:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

Якщо це допомагає комусь, (навіть якщо це погано, тому що ми повинні дозволити це лише з метою розробки), ось рішення 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) повинен відповідати заголовку типу вмісту у своїй відповіді.

Ось список типових заголовків, які слід включити, включаючи один нестандартний заголовок "X_ACCESS_TOKEN":

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

Це те, що потрібно налаштувати ваш хлопець http-сервера для веб-сервера, на який ви надсилаєте свої запити.

Ви також можете попросити хлопця вашого сервера викрити заголовок "Довжина вмісту".

Він розпізнає це як запит перехресного походження ресурсів (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();
});

Заголовки, які ви намагаєтеся встановити, - це заголовки відповідей . Вони повинні бути надані у відповідь сервером, на який ви звертаєтесь із запитом.

Вони не мають місця для клієнта. Було б безглуздо мати засоби для надання дозволів, якби їх міг надати веб-сайт, який хотів отримати дозвіл замість веб-сайту, що володіє даними.

Якщо хтось відчуває цю проблему з експрес-сервером, додайте наступне проміжне програмне забезпечення

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

якщо ви тестуєте деякі запити javascript для ionic2 або angularjs 2, у своєму хроматі на ПК або mac, то будьте впевнені, що ви встановите плагін CORS для браузера Chrome, щоб дозволити перехресне походження.

Запити майби можуть працювати, не потребуючи цього, але для публікації та додавання та видалення знадобиться встановити плагін Cors для тестування, щоб пройти без проблем, що definitley не круто, але я не знаю, як це робити без плагіна CORS.

а також переконайтесь, що відповідь json не повертає 400 деяким статусом json

це проблема із заднім числом. якщо використовуєте вітрила 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'
};

В Asp Net Core , щоб швидко примусити його працювати на розвиток; в Startup.cs, Configure methodдодати

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

У моєму випадку я отримую кілька параметрів як @HeaderParam в метод веб-сервісу.

Ці параметри ОБОВ'ЯЗКОВО задекларувати у вашому фільтрі 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Помилка означає, що Access-Control-Allow-Originполе заголовка HTTP не обробляється і не допускається у відповідь. Видалити Access-Control-Allow-Originполе із заголовка запиту.

Якщо ви використовуєте для цього localhostі PHP, щоб вирішити проблему:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

З вашого переднього використання:

{headers: {"Content-Type": "application/json"}}

і бум більше не має питань localhost!