Fw / 1 (Lucee) - запрос Ajax не выполнен из-за политики CORS в Framework7

У меня есть следующий запрос ajax в Framework7, чтобы вернуть данные json в FW/1 (4.2) (Lucee 5.2.9), но, к сожалению, я получаю сообщение об ошибке из-за политики CORS через браузер Chrome.

app.request({
  url:"http://127.0.0.1:49820/index.cfm/user/login/",
  type:"POST",
  data:JSON.stringify({
    "username":username,
    "password":password
  }),
  crossDomain: true,
  xhrFields: { withCredentials: false },
  headers: {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Methods':'GET,HEAD,OPTIONS,POST,PUT',
   'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
   'Content-type': 'text/javascript; charset=utf-8',
  },
  dataType:"jsonp",
  success:function(result){
      console.log(result);
  }

 });

В моем Fw/1 Application.cfc у меня есть следующие настройки:

variables.framework =   {
      preflightOptions = true,
      generateSES = true,
      routes= [
        { "$POST/user/login/" = "/main/get" }
        ] 
    };

и в моем основном контроллере получить действие я получаю json через

rc.user_info = variables.userService.login(rc.dsn,rc.username,rc.password);
variables.fw.renderData( "json", rc.user_info);

К сожалению, я получаю следующее сообщение

Доступ к XMLHttpRequest по адресу «http://127.0.0.1:49820/index.cfm/user/login/» из источника «http://localhost» заблокирован политикой CORS: поле заголовка запроса access-control- allow-origin не разрешен Access-Control-Allow-Headers в предварительном ответе.

Что касается информации заголовка запроса, я получаю следующее, и, насколько я вижу, параметры также передаются:

введите здесь описание изображения

Любая идея, которая могла бы мне помочь?

С Уважением


person asimkon    schedule 21.02.2021    source источник


Ответы (2)


Какую версию FW/1 вы используете? Я полагаю, последний?

Я ничего не знаю о том, как работают функции ajax в Framework7, но я бы попробовал установить preflightOptions = true, если вы еще этого не сделали, в настройках вашей платформы FW/1 в Application.cfc и посмотреть, решит ли это вашу проблему.

Ознакомьтесь с разделом OPTIONS Support на странице http://framework-one.github.io/documentation/4.3/developing-applications/#options-support

ОБНОВЛЕНИЕ

Поскольку preFlightOptions используется...

Мое следующее предложение — установить разрешенные заголовки в настройках фреймворка FW/1. Вы можете сделать это, определив optionsAccessControl.headers = "your, headers, here". Это все упоминается в ссылке, которой я уже поделился.

Вы можете определить структуру optionsAccessControl в целом, если хотите, а также установить другие ключи.

optionsAccessControl = {
  origin: "",
  headers: "",
  credentials: true/false,
  maxAge: 12345
}

ОБНОВЛЕНИЕ 2

Эта же проблема была отправлена ​​в репозиторий GitHub FW/1, поэтому для прозрачность, я хотел поделиться решением здесь для всех, кто может столкнуться с этим...

В Application.cfc включите следующие параметры фреймворка:

generateSES = true,
SESOmitIndex = true,
preflightOptions = true,
optionsAccessControl = {
    origin: "*",
    headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin"
}

В методе контроллера передайте исходный заголовок с ответом:

variables.fw.renderData( "json", rc.user_info).header( "Access-Control-Allow-Origin", "*" );

Примечание. Из соображений безопасности рекомендуется не разрешать * и вместо этого разрешать только домен, который звонит/отвечает. (Пример: http://127.0.0.1:12345)

person Tony Junkes    schedule 22.02.2021
comment
Я обновил свой пост большим количеством информации о коде на стороне клиента и сервера и, конечно же, точным сообщением об ошибке, которое я получаю. С Уважением - person asimkon; 22.02.2021
comment
Я обновил свой пост информацией о заголовках запросов. С Уважением - person asimkon; 22.02.2021
comment
Я обновил свой ответ относительно настройки заголовков с помощью параметра optionsAccessControl framework. - person Tony Junkes; 22.02.2021

Функционал CORS заключается в том, чтобы блокировать запрос браузера (это запрашивающий «источник»), который явно не разрешен конечной точкой. В вашем случае конечная точка находится по адресу http://127.0.0.1:49820/index.cfm/user/login/. Невозможно сообщить клиенту с помощью чистого клиентского кода (как вы это делаете, отправляя их в заголовках запроса вашего запроса ajax), чтобы обойти его. Это нарушит функциональность CORS и нарушит то, для чего CORS был разработан.

Правильный способ реализации CORS — реализовать их как заголовки ответов сервера в конечной точке index.cfm/user/login/ вашей инфраструктуры FW/1, а не в запросе AJAX. В cfml вы обычно реализуете заголовки ответов сервера, устанавливая их с помощью тега cfheader. Вот несколько типичных примеров разрешения запросов. Убедитесь, что конечная точка FW1 отправляет эти заголовки HTTP-ответа сервера (например, проверив ответ с помощью инструментов разработчика Chrome).

Предположим, вы открываете приложение браузера с URL-адресом http://mydomain1:8080, а ваша конечная точка отличается (домен/IP/протокол или порт), например. по адресу http://mydomain2:49820/index.cfm/user/login/, вам нужно добавить этот заголовок ответа сервера в код конечных точек, который отправляет аналогичный JSON:

<cfheader name="access-control-allow-origin" value="http://mydomain1:8080">
<cfheader name="access-control-allow-credentials" value="true">
<cfheader name="access-control-allow-headers" value="Content-Type">

Для получения дополнительной информации см. документацию по CORS здесь

person AndreasRu    schedule 22.02.2021
comment
Я уже реализовал все эти настройки, но, к сожалению, безуспешно. У запроса GET НЕТ проблем, поскольку параметр не передается, но у запроса POST есть проблема, потому что параметр передается. С Уважением - person asimkon; 22.02.2021
comment
Вы показываете заголовки запросов на скриншоте, а не заголовки ответов. Не могли бы вы показать изображение вкладки ответа в инструменте разработчика Chrome? Там вы найдете заголовки сервера - person AndreasRu; 23.02.2021
comment
К сожалению, на вкладке ответа нет информации, так как я пробовал ее ранее вместе с вкладкой запроса. Клиент отправляет данные json, а сервер отклоняет их из-за политики CORS, поэтому ответа нет. С Уважением - person asimkon; 23.02.2021
comment
Вам нужно каким-то образом проверить эти заголовки сервера (с почтальоном, RESTer или подобным). Эти заголовки сервера ответов - это те, которые должны отправлять Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, и НЕ запрашивать заголовки. - person AndreasRu; 23.02.2021
comment
Я использовал почтальона, передающего эти параметры через POST с необработанным запросом тела json, и получаю внутреннюю ошибку сервера 500. Я думаю, что политика CORS появляется снова. В любом случае, я уже открыл вопрос в репозиторий Fw/1 github, так как боюсь, что больше ничего не могу сделать. С Уважением - person asimkon; 23.02.2021