Blocked by CORS policy


#1

I have a simple single page static site that has a basic contact form using a .ajax() to post submissions to [formcarry].

However, I recently noticed that this is no longer working. It hasn’t been touched for about 6 months
The console has the entry

“Access to XMLHttpRequest at 'https://formcarry.com/s/ABCXYZ from origin ‘website[dot]com’ has been blocked by CORS policy: Request header field access-control-allow-headers is not allowed by Access-Control-Allow-Headers in preflight response.”

After reading up about CORS. It should be a simple matter of adding the following snippet to my .htaccess file in the document root however I still can’t seem to get the ajax request to work.
Header add Access-Control-Allow-Origin “https:// formcarry.com/

Does anyone know what I need to do to get this working?


#2
  • Go to applications/app name/public_html/

  • Add below code in the .htaccess file

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Let me know if you need any more help.


#3

Hi Mate,

I don’t see how that can help me unless I am loading external fonts.


#4

Then don’t use the FilesMatch statement:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://formcarry.com/”
</IfModule>


#5

If you are Blocked by CORS policy then you won’t be able to perform cross-domain AJAX requests. Add the below code to your .htaccess file:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: “GET,POST,OPTIONS,DELETE,PUT”

There is also another method of using JSONP through which you can bypass the Cross-Domain Request boundaries.


#6

@diana @stephanie

Thank you so much for your replies. I haven’t had the opportunity to revisit it but I don’t believe JSONP is an option. I have noticed this setting has appeared under application settings. I need to enable to use the above code snippets right?

image


#7

Enable it and check if it works.