Wordpress allow cross origin on wp-content (CORS)

Question

I have a problem with Wordpress and CORS on /wp-content folder

Site A (My main website) : example.com
Site B (My wordpress) : wordpress.example.com

My goal is to load pdf files (Using PDF.js in React) from A. Pdf files are stored on B. PDF.js make Ajax request.

If I request on B (wordpress.example.com) from A => It works
If I request on B (wordpress.example.com/my-page) from A => It works
BUT If I request on B (wordpress.example.com/wp-content/uploads/my-test.pdf) from A => It doesn't works

I tried to add a .htaccess on /wp-content folder but nothing changed..

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

Thanks for your help

@gael I updated my post to add console log and request informations — Cam CHN, Apr 01 '20 at 10:18
As mentionned in console logs, you have to set your request's mode to 'no-cors'. You shall find your answer here https://stackoverflow.com/questions/54301686/how-to-fixed-set-the-requests-mode-to-no-cors — gael, Apr 01 '20 at 10:36
The actual problem seems to be that the server is responding with a 500 error. The response to `https://articles.petanque-live.com/wp-content/uploads/calendars/063-2020.pdf` is a 500 error, and the response to `https://articles.petanque-live.com/wp-content/` is also a 500. So you don’t have a CORS problem. Or at least it’s not clear you actually have a CORS problem. Instead you have a 500 problem — an internal server failure. The only reason the browser reports that CORS message is because 500 errors are generally never gonna have the Access-Control-Allow-Origin header. — sideshowbarker, Apr 01 '20 at 12:36
The way to troubleshoot that 500 error is to check the `https://articles.petanque-live.com` server logs. See what messages the server is logging there about whatever internal server failure is happening that cause the server to end up responding with that 500 error. Maybe it’s a syntax error in the `.htaccess` file — so you might want to start by running a syntax check on that `.htaccess` file. — sideshowbarker, Apr 01 '20 at 12:40
@sideshowbarker I was doing some tests, so you see a 500 error because I was testing some htaccess config. Sorry for that. I was able to fix my issue with a home made proxy. I reply to my post with proxy code. — Cam CHN, Apr 01 '20 at 13:06

score 0 · Answer 1 · answered Apr 01 '20 at 13:10

I was able to fix my issue with a Node proxy (Typescript).

import { Request, Response } from 'express';
import request from 'request';

export class Controller {

    get(req: Request, res: Response): Promise<Response> {
        try {
          const file = req.params.file;
          let url = `https://wordpress.example.com/wp-content/uploads/${file}`;
          let src = request(url);
          req.pipe(src).pipe(res);
        } catch (error) {
          console.log(error);
          return res.status(500).json(error.message);
        }
    }

}

export default new Controller();

It's not resolving CORS issue but it bypass it. Thanks for your help :)

Wordpress allow cross origin on wp-content (CORS)

1 Answers1