How to customize cors in Cloudflare

Hi,

I have a Service (service.mydomain.org) and UI (webui.mydomain.org) and that are deployed in one of the servers. and that server is configured with Cloudflare.
My UI application is a calling service with Ajax call. In My UI I have a Rich textbox this contains a few links / URLs. when the user hits submit I am getting the below error.

When I decrease the security level or remove cors, the application is working fine. Is there any place to configure customize cors in Cloudflare?

Please help me in this regards

Error:
Access to XMLHttpRequest at 'from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons.

Do you have CORS HTTP header at your origin/host for desired domain and sub-domains?

Are you doing GET or POST request?

If using PHP:

<?php header('Access-Control-Allow-Origin: *'); ?>

If using Apache .htaccess:

# for specific files
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

# or this one for everything
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Moreover, adding Access-Control-Allow-Origin on Subdomains would go like this in Apache .htaccess:

<IfModule mod_headers.c>
   SetEnvIf Origin "^(.*\.yourdomain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</IfModule>

Nginx .vhost file would go like this:

add_header "Access-Control-Allow-Origin" "*";

# or if for specific files inside location {..} block
if ($request_uri ~ ^[^?]*\.(ttf|ttc|otf|eot|woff|woff2|font|css|js)(\?|$)) {
    add_header Access-Control-Allow-Origin "*";
}
1 Like