Of Stack

Solution of Apache Cross domain Resource Access Error Reporting Problem

  • 2021-08-17 01:48:33
  • OfStack

In many cases, large and medium-sized websites will place static resources (such as font files, pictures, etc.) on independent servers or CDN 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 master station

However, in the actual deployment, it will be found that the browser cannot load these resources with different domain names, and the firefox console will report an error:

< span role="presentation" class="objectBox objectBox-errorMessage " > < span class="errorMessage " > Cross-source request blocked: Homology policy prohibits reading remote resources located at http://xxxxx. (Reason: 'Access-Control-Allow-Origin' missing from CORS header). < /span > < /span >

Cross-source request blocked: Homology policy prohibits reading remote resources located at http://xxxxx. (Reason: CORS request failed).

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

To understand cross-domain, we must first understand the homology policy. Cognate policy is a very important security policy implemented in browsers for security reasons.

What is homology:

URL consists of protocol, domain name, port and path. If the protocol, domain name and port of two URL are the same, they are homologous.

Homologous strategy:

The browser's homologous policy, which restricts "document" or scripts from different sources, reads or sets certain properties on the current "document". (White hat talks about web safety [1])
Scripts loaded from one domain do not allow access to document properties of the other domain.

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

Access-Control-Allow-Origin *

In this paper, apache is operated, and nginx is similar

Edit httpd. conf first

Find this line

#LoadModule headers_module modules/mod_headers.so

Remove the # annotation

LoadModule headers_module modules/mod_headers.so

The purpose is to open the apache header information customization module

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

Header set Access-Control-Allow-Origin *

When accessing the resources of this domain name, add 1 header information

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>
Related articles: