Font-Awesome has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourceHere's a new take on a common problem. Show So I have a plesk hosting, with a SSL on wildcard domains. I have a wordpress theme which is using Font-Awesome icons, hosted on the same server. I have added the following lines to my /httpdocs/.htaccess file, at the very top: <IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>I use the polylang translation plugin, which is set to use subdomain for different language:
When I access example.com, everything works fine. When I access fr.example.com, I get a lot of the following errors in the console: Access to font at 'https://example.com/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2' from origin 'https://fr.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.I was expecting the error to go away by adding the Header set lines to my .htaccess but it does not seem to help at all. According to Plesk I do have the Headers module activated. I do use NGINX as a proxy to Apache, all with default configs. I did try to add the following lines, just in case, but all 3 attempts lead to Error 500: #NGINX < 1.4 if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *; } # NGINX 1.4 location ~* \.(eot|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } # NGINX > 1.6 if ($request_uri ~* ^.*?\.(eot)|(ttf)|(woff)$) { add_header Access-Control-Allow-Origin *; }I also tried to add this in the .htaccess without success: It almost seem as the .htaccess is not being loaded, but then the rewrite rules and the caching headers from WP-Optimize works fine and are from the same file. Any idea what I am doing wrong ? SolutionsAs I use Apache and NGINX. Apache role is to serve more complex requests while NGINX role is to quickly serve statics files. The header code was not being used as the specific files causing the error are considered to be static files and therefore served directly by NGINX and Apache never gets involved. In Plesk, if you go in the domain example.com > Apache & nginx Settings, scroll down a bit and check the NGINX settings. (Note that you need to apply this for your main domain, NOT the subdomains) In my case I had: [X] Proxy mode [X] Smart static files processing [_] Serve static files directly by nginxBasically NGINX tried to be smart and serve the ttf, woff, woff2, etc. Doing so the .htaccess is never interpreted for those files. Solution In Plesk, if you go in the domain example.com > Apache & nginx Settings. Uncheck Smart static file processing and check Serve static files directly by NGINX: [X] Proxy mode [_] Smart static files processing [X] Serve static files directly by nginxAnd under that last option you have a text box prefilled with file extensions that you want NGINX to serve directly. I made sure to remove ttf, woff, woff2 from the list. That way Apache is now in charge of serving those files slightly slower, but it will read and apply the .htaccess file to it. In the /httpdocs/.htaccess file I have that bit of code at the very top: <IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>Now it should work! Similar questionsCross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin I am running a WordPress multisite blog and it is using SSL ... I am also using domain mapping for various sub blogs on the multisite network but the mapped domains are not on SSL ... I am having issues with the font I installed ... it is not loading on the mapped domain and In the console I am seeing this error Font from origin 'https://examplesit... origin has been blocked by CORS policy Access to font at 'https://example.com/wp-content/uploads/2021/05/FuturaBT-Light.woff' from origin 'https://www.example.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains the invalid value 'example.com'. getting this error in my wordpress Bitnami instance AWS How fix this I am using wp-cors as plug in "Access to Font..has been blocked by CORS policy" on only one file Note: I am using Wordpress and serving the media files, css, js, etc. through Amazon CloudFront/S3. Hello, I know there are a lot of posts like this but I am still struggling. I was able to fix this issue for a majority of the font files that I am loading, however, this one continues to be an issue. The other font files are fine after I added this ... Wordpress: redirect from B to A has been blocked by CORS policy First of all those similars questions does not fit my situation, I've tried all the .htaccess solutions already. I have a WordPress site (A) which handles the reservation form, and the form submit to another server (B) which handle the data (as well as follow up customer and payment), after the submission success I need to redirect to thanks-you pa... Also askHow do I enable Apache AccessHere are the steps to set Access-Control-Allow-Origin header in Apache.. Enable headers module. You need to enable headers module to enable CORS in Apache. ... . Open Apache Configuration File. ... . Enable CORS in Apache. ... . Test Apache Configuration. ... . Restart Apache Server.. How do you solve no AccessThere Are Two Approaches to Getting It Right.
Use a reverse proxy server or WSGI server(such as Nginx or Apache) to proxy requests to your resource and handle the OPTIONS method in the proxy. Add support for handling the OPTIONS method in the resource's code.
How do I fix CORS policy no Access< access-control-allow-origin: *
You can solve this temporarily by using the Firefox add-on, CORS Everywhere. Just open Firefox, press Ctrl+Shift+A , search the add-on and add it! Thanks this helps to avoid all the hassle and test the code from localhost.
How do I remove AccessIn that case you can change the security policy in your Google Chrome browser to allow Access-Control-Allow-Origin. This is very simple: Create a Chrome browser shortcut. Right click short cut icon -> Properties -> Shortcut -> Target.
|
No Access-Control-Allow-Origin header is present on the requested resource Apache
zusammenhängende Posts
Urheberrechte © © 2024 defrojeostern Inc.
