74509

Allow my API to be access via AJAX

Question:

I have an API that fetches some date on the server.

public function post_events() { header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST'); header("Access-Control-Allow-Headers: X-Requested-With"); $city = Input::post('city','all'); $c = Model_chart::format_chart($city); return $this->response($c); }

It works fine on usual curl methods. But I am trying to access it using $http on Angular.js and it gets me this error.

<blockquote>

XMLHttpRequest cannot load <a href="http://event.deremoe.com/vendor/events.json" rel="nofollow">http://event.deremoe.com/vendor/events.json</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://app.event.chart" rel="nofollow">http://app.event.chart</a>' is therefore not allowed access.

</blockquote>

As you can see I already add the headers in the function. I also checked on curl and the header Access-Control-Allow-Origin is attached when I call the api.

Is there something I am missing here?

More Info: Here's the header information that is returned to me via normal curl.

Remote Address:104.28.19.112:80 Request URL:http://event.deremoe.com/vendor/events.json Request Method:OPTIONS Status Code:404 Not Found Request Headersview source Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:accept, content-type Access-Control-Request-Method:POST Connection:keep-alive Host:event.deremoe.com Origin:http://app.event.chart Referer:http://app.event.chart/ User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36 Response Headersview source CF-RAY:16f687416fe30c35-SEA Connection:keep-alive Content-Encoding:gzip Content-Type:text/html; charset=UTF-8 Date:Thu, 25 Sep 2014 10:27:17 GMT Server:cloudflare-nginx Set-Cookie:__cfduid=d1a9e4283faacc0a2b029efef586b6b931411640837342; expires=Mon, 23-Dec-2019 23:50:00 GMT; path=/; domain=.deremoe.com; HttpOnly Transfer-Encoding:chunked X-Powered-By:PHP/5.4.30

Answer1:

The browser makes first a pre-flight options call to your api and this is what it triggers the error: Access-Control-Allow-Origin. You can create an endpoint on your api that accepts all the OPTIONS request and you have also to set the headers there like on the post events:

header('Access-Control-Allow-Origin: *');

The Status Code that you also receive is 404 Not Found. That means that is not able to find an OPTIONS endpoint.

Recommend

  • How to add System.Windows dll to Visual Studio 2010 express?
  • How to work with Master Page that is attached to the page via the page's basepage?
  • Fire callback when selection was made with select2 4.0, and retrieve the value of last selection
  • New Firebase failed: First argument must be a valid firebase URL and the path can't contain “.”
  • JSON encode and decode on PHP
  • Building Qt project for C++11 standard
  • Error in installing package: fatal error: stdlib.h: no such file or directory
  • jQuery: add elements until a particular height is reached
  • How to make R's read_csv2() recognise the text characters properly
  • Angular2 Response for preflight is invalid (redirect) from some GET requests
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Content-Length header not returned from Pylons response
  • How to attach a node.js readable stream to a Sendgrid email?
  • Play WS (2.2.1): post/put large request
  • How to rebase a series of branches?
  • Deselecting radio buttons while keeping the View Model in synch
  • Nant, Vault & Windows Integrated Authentication
  • Different response to non-authenticated users and AJAX calls
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Hazelcast - OperationTimeoutException
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • Web-crawler for facebook in python
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • RestKit - RKRequestDelegate does not exist
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • Revoking OAuth Access Token Results in 404 Not Found
  • Angular 2 constructor injection vs direct access
  • Why joiner is not used after Sequence generator or Update statergy
  • Java static initializers and reflection
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • File not found error Google Drive API
  • How does Linux kernel interrupt the application?
  • Is it possible to post an object from jquery to bottle.py?
  • Can't mass-assign protected attributes when import data from csv file
  • Busy indicator not showing up in wpf window [duplicate]
  • UserPrincipal.Current returns apppool on IIS
  • Why do underscore prefixed variables exist?