Trouble logging in - CORS, Blank Page - X-FRAME-OPTIONS Errors

If you have trouble logging into your app, or displaying content, CORS (cross origin resource sharing) may be the issue. The error sometimes looks like this in a browser console:

This can be caused by settings on your website, or a plugin conflict.

How to Fix CORS Errors

You may need to try multiple things to find the fix, please try them in the order we have listed below. 

  • PHP 7+
  • Permalinks set to anything except default (post name for example)
  • Godaddy users - the firewall can cause CORS issues, please disable it

Try one fix and see if it works, if not add the next fix and try again.

1. Enable CORS setting

Visit your WordPress website, and click AppPresser in the left side menu. Towards the top of the AppPresser settings, you will see "Enable CORS." Check this box and save. This allows content from any location to appear in your app by adding "Access-Control-Allow-Origin: *" to your website.

2. Install CORS Fix Plugin

We created this CORS fix plugin to help with this issue. Please download here, install and activate it.

After activating the plugin, see if your issue is fixed. If not, visit the AppPresser settings page in your WordPress admin.

Scroll down to the CORS Settings. Do not check all settings. See below and check the appropriate settings only.

Allow credentials: htaccess - check this setting if you cannot login to the app, or if you need authorization headers enabled.
Blank Iframe - check this setting if you are seeing blank iframe pages, or you have an X-Frame Options error.
Access-Control-Allow header: PHP - check this setting if you are getting a generic CORS error, No 'Access-Control-Allow-Origin' header is present

JWT CORS 

If you see errors when logging in, you may need to add this line to your wp-config.php: 

define('JWT_AUTH_CORS_ENABLE', true);

You can test for JWT errors by sending a POST request with your access token to https://YOURSITE.com/wp-json/jwt-auth/v1/token/validate Here's how we do this:

1. Go to the app preview, and open the developer console. Login, then copy the access_token in the login response.
2. Open Postman, and create a POST request to .../wp-json/jwt-auth/v1/token/validate
3. Add an Authorization header of type "Bearer Token", and add the access token. Make sure to remove the double quotes at the ends of the string.
4. Send the request, and see if there is an error response.

Plugin Conflict

Sometimes login errors are due to a plugin conflict. Add our plugin blocker to your site, and block all plugins except AppPresser plugins and JWT auth. If that fixes the issue, you can re-enable plugins a few at a time to see what plugin is causing the issue. https://docs.apppresser.com/article/438-plugin-blocker

If you are still not able to resolve your CORS error after trying the 4 solutions above, please contact support.

If you are using the CORS fix plugin, you do not need to read any further. The information below is already applied with the plugin. If you need to manually edit your .htaccess file because the plugin is not working, then you can try the methods below.

Enable Authorization Header

If you still can't login, make sure you have authorization headers enabled.

Most of the shared hosting has disabled the HTTP Authorization Header by default. To enable this option you’ll need to edit your .htaccess file adding the following: 

# BEGIN AppPresser
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</IfModule>
# END AppPresser

To enable this option on an NGINX server, including WP Engine hosting, please contact them for help.

Add the code for enabling the Authorization header at the top of the .htaccess file, or right before this line  # BEGIN WordPress 

If you see errors when logging in, you may need to add this line to your wp-config.php: 

define('JWT_AUTH_CORS_ENABLE', true);

Access-Control-Allow-Origin header contains multiple values, *.

This is rare, but if you see something like "Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed" in your debug console:

This can be caused by third party plugins (such as W3TotalCache) adding the following to the .htaccess file:

To test if this is the issue, you can add a # symbol before the word Header and that should solve the issue.  However, before staying with those changes, you should check with your developer or W3TotalCache so see if doing that is a good idea.

Or if you are seeing an error like below, then try with below code in your .htaccess file 

<IfModule mod_headers.c>
    # Example code for multiple domains
    # SetEnvIf Origin "^http(s)?://(.+\.)?(myapppresser\.com|myapppresser2\.io|xyz\.com)$" origin_is=$0     
  
    SetEnvIf Origin "^http(s)?://(.+\.)?(myapppresser.com)$" origin_is=$0    
    Header always set Access-Control-Allow-Origin: %{origin_is}e env=origin_is
</IfModule>

X-Frame Options Error

If you are seeing an X-Frame options error, please try the solutions below.

ALLOWALL Method

Most sites have an .htaccess file in the site root that you can edit via SFTP. Add the line below towards the top of the file as shown. 

header always set x-frame-options "ALLOWALL"

If you are still having trouble, please contact support.

Response to preflight request doesn't pass access control check

If you see an error about preflight only when logged in, this has to do with authorization. It could be that your web host does not allow OPTIONS requests. Run this command to test: 

curl -X OPTIONS https://yoursite.com/ -i

If that command returns an error page, your website is probably blocking preflight requests with a firewall. Examples would be GoDaddy Firewall or the Sucuri security plugin. This firewall needs to be disabled.

Blank page in your app - X-FRAME-OPTIONS errors

A common cause of seeing a blank page when using external pages in your app is a common security settings called X-FRAME-OPTIONS.  If this option is set to SAMEORIGIN, your content will be blocked by the browser.

Many site owners do not want other websites to display their content in an iframe. So by adding X-FRAME-OPTIONS: SAMEORIGIN to your page or entire website, browsers will not display your page inside of an iframe.  This security feature is used on Woocommerce's checkout and account pages to protect the content on those pages.

Is My Site Using X-FRAME-OPTIONS: SAMEORIGIN?

You can check if your site is adding this setting by using Chrome's Developer Tools:

  1. Open the Developer Tools
  2. View the Network tab
  3. Reload your page
  4. Click the loaded page
  5. Read the x-frame-options.

If you do not see x-frame-options in the list, then you do not have this option.  Your white page will be caused by another issue.  Most likely you can find a JavaScript error in the Developer Tool console.

How is X-FRAME-OPTIONS: SAMEORIGIN Added?

Knowing how this setting gets added will help you to adjust or remove this setting as needed.  There are a few different ways this can be added to a page, site or your server.  If using PHP directly, it gets added using this code:

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them. 

header( 'X-Frame-Options: SAMEORIGIN' );

WordPress adds this to your header using a hook.  If you are familiar with hooks, you'll know that using add_action() will add certain functions to your site, but using remove_action() will remove certain functions to your site.  WordPress uses this 'send_frame_options_header' hook for the login page and Woocommerce uses the 'wc_send_frame_options_header' hook for their checkout page.

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them. 

add_action( 'login_init',  'send_frame_options_header', 10, 0 ); // WordPress login

add_action( 'template_redirect', 'wc_send_frame_options_header' ); // Woocommerce checkout page

If your web server is using Apache, you can added this setting in the .htaccess file:

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them. 

<IfModule mod_headers.c>

     Header set X-Frame-Options "SAMEORIGIN"

     <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|webmanifest|woff2?|xloc|xml|xpi)$">
         Header unset X-Frame-Options
     </FilesMatch>

</IfModule>

How to remove it?

As long as you understand the security reason it's added, removing it can be done using a remove_action hook or modifying an .htaccess file. 

remove_action( 'template_redirect', 'wc_send_frame_options_header' );

Using this hook is how you can get the Woocommerce checkout and account pages to display in the app.  You might have other plugins adding the x-frame-options in a very similar fashion; so removing it will be very similar to this remove_action. 

NGINX

If working with an NGINX setup, add the following to your NGINX config file if experiencing issues, particularly 'SAMEORIGIN' issues: 

	add_header Access-Control-Allow-Origin;

NGINX  (standalone)

If working with an NGINX setup, add the following to your NGINX config file if experiencing issues: 

	location / {
	add_header 'Access-Control-Allow-Origin' *;
	add_header 'Access-Control-Allow-Credentials' true;
	}

NGINX (reverse proxy)

If using NGINX as a reverse proxy for Apache, add the following to your NGINX config file if experiencing issues: 

	location / {
	proxy_hide_header 'Access-Control-Allow-Origin';
	add_header 'Access-Control-Allow-Origin' *;
	add_header 'Access-Control-Allow-Credentials' true;
	}

Theme My Login

If you're using the theme my login plugin it will automatically add the sameorigin X-Frame-Option setting which prevents it from being loaded in the app. The following snippet will stop Theme My Login from adding that header and allow the login page to display. This code should be added to the functions.php file in your  AP3 Ion Child Theme. 

function your_theme_tml_display( $output, $action ) {
    if ($action == 'login') {
        header_remove("X-Frame-Options");
    }
    return $output;
}
add_filter( 'tml_display', 'your_theme_tml_display', 10, 2 );