Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-26T07:37:58.287Z
Answers.LastActivityDate: 2016-08-26T07:37:58.287Z
Answers.UserDisplayName: Spoeken
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-16T07:12:36.320Z
Answers.LastActivityDate: 2016-08-16T07:20:17.210Z
Answers.LastEditDate: 2017-04-13T12:51:00.200Z
Answers.UserDisplayName: Steve Holland
Body: <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>
  
Tags: <plugin-elementapi><json>
Title: Access Element API JSON in another environment
ThreadText: # 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)
  
  
  ---
  
  