Solution to Apache cross-domain resource access error

In many cases, large and medium-sized websites will place static resources (such as font files, pictures, etc.) on independent servers or CDNs and use independent resource domain names (such as res.test.com) in order to distribute static resources, speed up access, and reduce the pressure on the main site.

However, in actual deployment, you will find that the browser cannot load resources from these different domain names, and the Firefox console will report an error:

<span role="presentation" class="objectBox objectBox-errorMessage "><span class="errorMessage ">Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xxxxx. (Reason: CORS header missing 'Access-Control-Allow-Origin'). </span></span>

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xxxxx. (Reason: CORS request failed).

This is because modern browsers define it as a cross-origin resource and do not allow it to be loaded.

To understand cross-domain, you must first understand the same-origin policy. The same-origin policy is a very important security policy implemented on browsers for security reasons.

What is homology?

A URL consists of a protocol, domain name, port, and path. If two URLs have the same protocol, domain name, and port, they have the same origin.

Same-origin policy:

The browser's same-origin policy restricts "documents" or scripts from different origins from reading or setting certain properties of the current "document". (White hat talks about web security[1])
Scripts loaded from one domain are not allowed to access document properties from another domain.

So the key is how to solve it. In fact, it is very simple. Just add a header information on the static resource server:

Access-Control-Allow-Origin *

This article uses apache for operation, nginx is similar

First edit httpd.conf

Find this line

#LoadModule headers_module modules/mod_headers.so

Remove the # comment character

LoadModule headers_module modules/mod_headers.so

The purpose is to enable the Apache header information custom module

Then add a line to the virtual host of the independent resource domain name

Header set Access-Control-Allow-Origin *

This means adding a header when accessing resources on this domain name.

Restart apache

Visit again, OK!

NameVirtualHost 10.0.0.2:80
<VirtualHost 10.0.0.2:80>
  DocumentRoot /var/www/host.example.com
  ServerName host.example.com
  JkMount /webapp/* jkworker
  Header set Access-Control-Allow-Origin "*"
  RewriteEngine on
  RewriteRule ^/otherhost http://otherhost.example.com/webapp [R,L]
</VirtualHost>

And here's an example of the Apache config for the second:

NameVirtualHost 10.0.1.2:80
<VirtualHost 10.0.1.2:80>
  DocumentRoot /var/www/otherhost.example.com
  ServerName otherhost.example.com
  JkMount /webapp/* jkworker
  Header set Access-Control-Allow-Origin "*"
</VirtualHost>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.