Form action links to file on a third-party website, getting "Cross-Origin Request Blocked"

Support
,
1

Hello,

I have created the following form using Netlify Forms:

<form id="download-d-i-v-e-march-report-form" name="d-i-v-e" action="https://res.cloudinary.com/makers-asylum/image/upload/v1564326086/D.I.V.E%202019%20Report.pdf" method="post" data-netlify="true">
  <div class="form-group">
    <label for="name" class="col-form-label">Name</label>
    <input type="text" name="name" class="form-control" id="name" required="">
  </div>
  <div class="form-group">
    <label for="email" class="col-form-label">E-mail Address</label>
    <input type="email" name="email" class="form-control" id="email" required="">
  </div>
  <div class="form-group">
    <label for="phone" class="col-form-label">Contact Number</label>
    <input type="tel" name="phone" class="form-control" id="phone">
  </div>
  <div class="form-group">
    <label for="occupation" class="col-form-label">Occupation</label>
    <input type="text" name="occupation" class="form-control" id="occupation" required="">
   </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit and Download</button>
  </div>
</form>

But on submission I am getting the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://res.cloudinary.com/makers-asylum/image/upload/v1564326086/D.I.V.E%202019%20Report.pdf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Please help.

1 Like
2

Hi, @akshatkedia. I see the action attribute for the form is this:

https://res.cloudinary.com/makers-asylum/image/upload/v1564326086/D.I.V.E%202019%20Report.pdf

For Netlify forms, the action must be a path relative to the site root. Quoting the Forms documentation:

You can replace the default success message with a custom page you create by adding an action attribute to the <form> tag, entering the path of your custom page (like "/pages/success" ) as the value. The path must be relative to the site root, starting with a / .

To be clear, having the action for a form be URL containing any domain name is not supported. About the Cross-Origin Resource Sharing (CORS) issue, there is more information about resolving this type of issue here:

3

Hi @luke, thanks for clarifying!