No 'Access-Control-Allow-Origin' header is present on the requested resource for Wordpress site

Question

I have an MVC application, and on one of my pages I am using jQuery .get() to go out to our company's Wordpress site and retrieve information to be posted on my view page. This works in IE 11, but does not in Chrome or Edge.

Here is my script:

<script>
    $.get("https://ourcompany.com/feed/", function (data) {
        var $XML = $(data);
        $XML.find("item").each(function (index) {
            var $this = $(this),
                item = {
                    title: $this.find("title").text(),
                    link: $this.find("link").text(),
                    pubDate: $this.find("pubDate").text(),
                    author: $this.find("author").text(),
                };
            if (index == 0)
                $('#Feed').append($('<h4/>').addClass('header').text(item.title));
            else
                $('#Feed').append($('<h4/>').addClass('following-headers').addClass('header').text(item.title));

            $('#Feed').append($('<a target="_blank" href="' + item.link + '"/>').text("Get the full story here!"));
            if (index >= 2)
                $('#Feed').append($('<p/>').css({ "margin-top": "10px" }).text("Published on " + item.pubDate.split("+")[0]));
            else
                $('#Feed').append($('<p/>').css({ "margin-top": "10px" }).addClass('lastParagraph').text("Published on:  " + item.pubDate.split("+")[0]));

            if (index >= 2)
                return false;
        });
    });
</script>

I have published my MVC project to our company's webserver, and when I open up the page that is running this script.. I check the console in Chrome and see this:

Failed to load https://ourcompany.com/feed/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ourwebserver' is therefore not allowed access.

How is this working in IE and not Chrome and Edge? How do I get this to work in Chrome and Edge?

This is not a duplicate because I am not using Postman.. and I was able to resolve this issue by installing a plugin for my wordpress site.

@GTown-Coder because IE is less secure and doesn't implement [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to protect against cross-site scripting. — Karl Reid, Dec 01 '17 at 18:39
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Taplar, Dec 01 '17 at 18:40
configure your wordpress server to add an `Access-Control-Allow-Origin` header for `ourwebserver` — Karl Reid, Dec 01 '17 at 18:40
@KarlReid have you ever done that before? Wondering if you could walk me through where I need to go within Wordpress — Grizzly, Dec 01 '17 at 18:44
Nah, I've never done it. You don't do it on Wordpress itself anyway, you do it on the webserver. For example, for Apache you can edit the `htaccess` file, see [here](https://enable-cors.org/server_apache.html). Or the other option is to host your MVC app on the same origin as your website. It's really worth reading up on the CORS link I mentioned so you are more familiar with this and can address these issues at the design phase of a feature that relies on cross-origin data exchange. — Karl Reid, Dec 01 '17 at 18:48
@epascarello hmm, I assumed IE was just not sending OPTIONS requests and Chrome was(and not getting an allowed response so aborting the GET), so why do you think OP has this problem? — Karl Reid, Dec 01 '17 at 18:56
I was able to fix this in Wordpress. Had to install a plugin that allowed CORS. [What I installed](https://zinoui.com/blog/http-headers-for-wordpress) — Grizzly, Dec 01 '17 at 18:58

score -1 · Answer 1 · answered Dec 01 '17 at 19:08

Can enable CORS in WordPress in functions.php:

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

Where * can be kept as a wildcard or set to multiple domains. An interesting approach to setting multiple domains is here: https://stackoverflow.com/a/7454204/4396292

I believe this was my original source when I had a similar CORS issue recently: https://gist.github.com/romuloctba/fe210bedc970f3a95d92

No 'Access-Control-Allow-Origin' header is present on the requested resource for Wordpress site

1 Answers1