Поле заголовка запроса Access-Control-Allow-Headers не разрешено Access-Control-Allow-Headers

Я пытаюсь отправить файлы на свой сервер с помощью почтового запроса, но при его отправке возникает ошибка:

Поле заголовка запроса Content-Type не разрешено 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) должен включить заголовок 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-сервер для веб-сервера, на который вы отправляете свои запросы.

Вы также можете попросить вашего сервера выставить заголовок «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();
});

Заголовки, которые вы пытаетесь установить, являются заголовками ответа . Они должны быть предоставлены в ответе сервером, к которому вы обращаетесь.

Им не место на клиенте. Было бы бессмысленно иметь средства для предоставления разрешений, если бы они могли быть предоставлены сайтом, который запрашивал разрешение, а не сайтом, которому принадлежали данные.

Если кто-то испытывает эту проблему с экспресс-сервером, добавьте следующее промежуточное ПО

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

Если вы тестируете некоторые запросы javascript для ionic2 или angularjs 2 в chrome на ПК или Mac, убедитесь, что вы установили плагин CORS для браузера chrome, чтобы разрешить перекрестное происхождение.

запросы на получение майбы будут работать без этого, но для отправки, размещения и удаления потребуется установить плагин cors, чтобы тестирование прошло без проблем, что определенно не круто, но я не знаю, как люди делают это без плагина CORS.

а также убедитесь, что ответ JSON не возвращается 400 по состоянию JSON

это проблема бэкэнда. если вы используете sails 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поле из заголовка запроса.

Если вы используете localhostPHP и установите это для решения проблемы:

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

С вашего внешнего использования:

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

и бум больше никаких проблем localhost!