rails amp форму запроса на ошибку и ответа access-control-allow-origin - PullRequest
0 голосов
/ 03 сентября 2018

Я использую рельсовый усилитель и задаю маршрут для усилителя для контактной формы

 <form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
       <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>    
        <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
              <span class="inline-label-label">Name</span>
            </label>
            <div class="validation-blk">
              <span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
              <span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
              <span class="inline-label-label">Email</span>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
            <span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
          </div>
        </div>
        <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
              <span class="inline-label-label">contatct number</span>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
          </div>
        </div>
        <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
              <span class="inline-label-label">City</span>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
          </div>
        </div>
        <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
              <span class="inline-label-label">State</span>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
          </div>
        </div>
         <div class="form-row">
          <div class="inline-form">
            <label class="inline-label">
              <input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
              <span class="inline-label-label">Country</span>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
          </div>
        </div>
        <div class="form-row">
          <div class="inline-form selectionbox">
            <label class="inline-label">
              <select class="select-box custom-select" required name="eventtype"
  id="eventtype">
                <option value="">QUERY TYPE</option>
   <% @app_config.event_type.split('|').each do |event_name,index| %>
     <option value="<%= event_name %>"><%= event_name %></option>
   <% end %>
              </select>
            </label>
            <span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
          </div>
        </div> 
        <div class="form-row">
          <div class="ampstart-input inline-block relative">
            <textarea name="message"  id="message" class="block" rows="5" cols="50" required  placeholder="your message"></textarea>
            <!-- <label class="textarea-ab" aria-hidden="true">
              Your message
            </label> -->
            <span visible-when-invalid="valueMissing" validation-for="message"></span>
          </div>
        </div>
         <div class="button button-common">
          <input type="submit"  value="OK" class="ampstart-btn caps">
        </div> 
        <!-- social icons -->
        <a href="#" class="facebook"></a>
        <a href="#" class="instagram"></a>
        <a href="#" class="twitter"></a>
        <div submit-success>
  <template type="amp-mustache">
    Subscription successful!
  </template>
</div>
<div submit-error>
  <template type="amp-mustache">
    Subscription failed!
  </template>
</div>
    </form>

И мой контроллер сохраняет форму в моей базе данных, но браузер выдает ошибку.

  def addquery
    @contact = Lead.new
    @contact.name = params[:name]
    @contact.email = params[:email]
    @contact.phone = params[:phone]
    @contact.city = params[:city]
    @contact.state = params[:state]
    @contact.country = params[:country]
    @contact.enquiry_type = params[:eventtype]
    @contact.message = params[:message]
    @contact.save
  end

когда я пытаюсь отправить форму AMP, она показывает

Запрос об ошибке формы усилителя должен иметь access-control-allow-origin

в консоли браузера.

, а также

ответ должен иметь access-control-allow-origin

1 Ответ

0 голосов
/ 04 сентября 2018

Установить access-control-allow-origin: <your domain> в качестве заголовка ответа в обработчике формы в рельсах.

Пример, если вы работаете на локальном хосте, задайте заголовок ответа формы как access-control-allow-origin: http://localhost:3000

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...