<p>Brandon answered this in a github issue <a href="https://github.com/pixelandtonic/ElementAPI/issues/4" rel="nofollow">https://github.com/pixelandtonic/ElementAPI/issues/4</a></p>

<p>You can do that by setting your endpoint config to an anonymous function:</p>

<pre><code>'my/endpoint/pattern' =&gt; function() {
    HeaderHelper::setHeader([
        'Access-Control-Allow-Origin' =&gt; 'http://example.com'
    ]);

    return [
        // ...
    ];
}
</code></pre>

CC BY-SA 3.0
2016-08-26T07:37:58.287Z
2016-08-26T07:37:58.287Z
Spoeken
<p>I don't know whether you've seen this answer to another similar question, but it might get you a bit closer:</p>

<p><a href="https://craftcms.stackexchange.com/a/13188/142">Ajax Post to guestEntries/saveEntries from another domain</a></p>

<p>You could maybe combine what the answer says with the <a href="https://craftcms.com/docs/templating/header" rel="nofollow noreferrer"><code>{% header %}</code></a> tag to output the two headers mentioned in the answer.   </p>

<p>You could always tailor the <code>Access-Control-Allow-Origin</code> to be more specific to your setup if you don't want open up access to all domains. You can find more information on the Headers themselves here :</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" rel="nofollow noreferrer">Mozilla Developer Network: HTTP access control (CORS)</a></p>

<p>(About half way down the page where it explains what <code>Lines 13 - 22</code> in the example are doing).</p>

<p>I haven't used the <code>Element API</code> myself yet, so all this may be way off, but hopefully it'll point you in the right direction!</p>

<p>EDIT: As you're using WebFaction, you should have access to add/edit the <code>.htaccess</code> file for you site, so you might be able to add those headers straight in there. There's more info in their docs here:</p>

<p><a href="https://docs.webfaction.com/software/static.html#static-cgi-php" rel="nofollow noreferrer">Webfaction: Static Files, CGI Scripts, and PHP Pages</a></p>

CC BY-SA 3.0
2016-08-16T07:12:36.320Z
2016-08-16T07:20:17.210Z
2017-04-13T12:51:00.200Z
Steve Holland
<p>First Craft project and off to a great start. I don't think i'll ever touch Wordpress again. :)</p>

<p>I'm using the Element API plugin to build out one of my feeds of entries and hoping to use that on a couple sites as a little widget.</p>

<p>JSON: <a href="https://csgoevents.gg/api/events.json">https://csgoevents.gg/api/events.json</a></p>

<p>Using jQuery for now: <a href="http://codepen.io/eboyer/pen/kXqNXJ">http://codepen.io/eboyer/pen/kXqNXJ</a></p>

<p>Getting this error: "XMLHttpRequest cannot load <em>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '</em>' is therefore not allowed access."</p>

<p>Historically, i'm more of a designer/html/css developer, so HTTP &amp; API work is new to me. From what I understand this can be avoided if the server could return JSONP? Or if I had any sort of control over nginx configurations? (I'm hosting with Web Faction)</p>

<p>Are there any examples out there of using Element API data on other domains?</p>

<p>Hopefully its something with a quick solve. Thanks in advance, excited to be here!</p>

<plugin-elementapi><json>
Access Element API JSON in another environment
# Access Element API JSON in another environment

(Asked by: username_0 on 2016-08-16)

First Craft project and off to a great start. I don't think i'll ever touch Wordpress again. :)

I'm using the Element API plugin to build out one of my feeds of entries and hoping to use that on a couple sites as a little widget.

JSON: <https://csgoevents.gg/api/events.json>

Using jQuery for now: <http://codepen.io/eboyer/pen/kXqNXJ>

Getting this error: "XMLHttpRequest cannot load *. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '*' is therefore not allowed access."

Historically, i'm more of a designer/html/css developer, so HTTP & API work is new to me. From what I understand this can be avoided if the server could return JSONP? Or if I had any sort of control over nginx configurations? (I'm hosting with Web Faction)

Are there any examples out there of using Element API data on other domains?

Hopefully its something with a quick solve. Thanks in advance, excited to be here!

**Tags:** plugin-elementapi, json


---

## 2 answers

### Answer by username_1 on 2016-08-26. Score: 3

Brandon answered this in a github issue https://github.com/pixelandtonic/ElementAPI/issues/4
You can do that by setting your endpoint config to an anonymous function:
'my/endpoint/pattern' => function() {
    HeaderHelper::setHeader([
        'Access-Control-Allow-Origin' => 'http://example.com'
    ]);

    return [
        // ...
    ];
}


---

### Answer by username_2 on 2016-08-16. Score: 2

I don't know whether you've seen this answer to another similar question, but it might get you a bit closer:

[Ajax Post to guestEntries/saveEntries from another domain](https://craftcms.stackexchange.com/a/13188/142)

You could maybe combine what the answer says with the [`{% header %}`](https://craftcms.com/docs/templating/header) tag to output the two headers mentioned in the answer.

You could always tailor the `Access-Control-Allow-Origin` to be more specific to your setup if you don't want open up access to all domains. You can find more information on the Headers themselves here :

[Mozilla Developer Network: HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

(About half way down the page where it explains what `Lines 13 - 22` in the example are doing).

I haven't used the `Element API` myself yet, so all this may be way off, but hopefully it'll point you in the right direction!

EDIT: As you're using WebFaction, you should have access to add/edit the `.htaccess` file for you site, so you might be able to add those headers straight in there. There's more info in their docs here:

[Webfaction: Static Files, CGI Scripts, and PHP Pages](https://docs.webfaction.com/software/static.html#static-cgi-php)


---

