Cross-Origin Resource Sharing in Laravel with Apache-CodePudding

I have a Laravel API for a social media like website. The API is consumed by a fully separate React app on the frontend. Everything works fine with the API.

I have many profile images of the users stored inside 'public' directory organized in folders. Below is the directory structure:

MyAppRoot
├── app
├── ....
├── public
│   └── folder1
|   |   └── img1.png
|   |   └── img2.png
│   └── folder2
|       └── img1.png
|       └── img2.png
└── resources
└── routes
└── ....

When I access the image directly using the URL https://myapp.com/folder1/img1.png in the browser, I can see the image but when I use the same image URL in the html file as img source <img src="https://myapp.com/folder1/img1.png"/> I get the below error in my browser console.

GET https://myapp.com/folder1/img1.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

I can access all images in all directories without any issues while accessed directly but get the same error if I try to embed any of the images in a html file.

I searched a bit and found that it is due to CORS policy, and I tried adding the folders in conf/cors.php paths as below:

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'public/*'],

AND

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'public/**/*'],

AND

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'forlder1/*'],

Unfortunately, none of these worked.

After searching a bit more, I found somewhere that the static files are not processed by Laravel but are directly served by Apache. So, I tried adding below lines in .htaccess file in the root of the app and also inside public directory of the app:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp|pdf)$">
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

But again, these too didn't work.

I also tried adding this code in Apache config file httpd.conf too but I couldn't make it work.

I couldn't find any more solutions to the problem and also, I am still not sure what is the exact problem here.

CodePudding user response：

The header Cross-Origin-Resource-Policy: same-origin instructs your browser not to load resources (such as images) from a different origin.

If you do not want to (or cannot) change this header, which comes from your server, you can set up your Apache server as a reverse proxy to myapp.com so that the browser requests the image locally, from /images/folder1/img1.png, and Apache forwards this request to https://myapp.com/folder1/img1.png.

CodePudding user response：

I finally found the solution. As stated by Heiko Theißen in the answer, the resources were not loading due to the response header Cross-Origin-Resource-Policy: same-origin.

The solution was to respond with the header Cross-Origin-Resource-Policy: cross-origin from the server.

I added below lines in my .htaccess file inside my /public directory and everything worked great. I added some pattern matching to avoid other security issues and add the header only when the request is for some static files.

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp|pdf|eot|otf|tt[cf]|woff2?)$">
        Header set Cross-Origin-Resource-Policy 'cross-origin'
    </FilesMatch>
</IfModule>

I have added pdf and different types of images and fonts extension in match pattern to allow variety of static files.