Asked  8 Months ago    Answers:  5   Viewed   12 times

My front-end application is running on a grunt live server on port 9100, while my PHP server is on the port 80. The host is the same, just the port differ.

When I send a POST request to http://dev.site.dev/api/gist with some JSON data, I got an error 404 on the preflight OPTIONS request.

I already added the CORS headers in apache configuration:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, accept, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

``` and restart the server but still got the issue.

Should I add an index_option() method in my gist controller ? Or the problem is somewhere else ?

 Answers

2

As I described in my answer on the CodeIgniter bug tracker for this "issue" #313, there is several solutions.

Application wide

I found a solution from HTTP OPTIONS error in Phil Sturgeon's Codeigniter Restserver and Backbone.js, which is to remove otpions from the list of value in $allowed_http_methods:

// protected $allowed_http_methods = array('get', 'delete', 'post', 'put', 'options', 'patch', 'head');
   protected $allowed_http_methods = array('get', 'delete', 'post', 'put', 'patch', 'head');

Resource's focused

Another solution is to simply implement the index_options().

It didn't work for me the first time due to a typo (it's OPTIONS is plural ). And with this solution no more need to temper with applications/libraries/REST_Controller.php:

public function index_options() {
    return $this->response(NULL, 200);
}

Now the preflight OPTION request is always true so the POST request is sent and everything works :)

Tuesday, October 5, 2021
 
5

EDIT:

It's been years, but I feel obliged to comment on this further. Now I actually am a developer. Requests to your back-end are usually authenticated with a token which your frameworks will pick up and handle; and this is what was missing. I'm actually not sure how this solution worked at all.

ORIGINAL:

Ok so here's how I figured this out. It all has to do with CORS policy. Before the POST request, Chrome was doing a preflight OPTIONS request, which should be handled and acknowledged by the server prior to the actual request. Now this is really not what I wanted for such a simple server. Hence, resetting the headers client side prevents the preflight:

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});

The browser will now send a POST directly. Hope this helps a lot of folks out there... My real problem was not understanding CORS enough.

Link to a great explanation: http://www.html5rocks.com/en/tutorials/cors/

Kudos to this answer for showing me the way.

Thursday, April 1, 2021
 
4

I finally found a work around. what i did is i removed custom headers from web.config file. i.e,

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
    <add name="Access-Control-Allow-Headers" value="Origin, Content-Type, X-Auth-Token"/>
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    <add name="Content-Type" value="application/json"/>

    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

This content i removed

and in WebApiConfig.cs i did following changes

var enableCorsAttribute = new EnableCorsAttribute(origins:"*",headers:"*",methods:"*");

            var json = config.Formatters.JsonFormatter;

            json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
            config.Formatters.Remove(config.Formatters.XmlFormatter);

            config.EnableCors(enableCorsAttribute);

and Controller Looks like this.

[EnableCors(origins: "*", headers: "*", methods: "*", SupportsCredentials = true)]
    [RoutePrefix("api/Add_Client_")]
    public class Add_Client_Controller : ApiController
    {
[AcceptVerbs("POST")]

        [HttpPost]
        [Route("PostGoals")]
        public string PostGoals(string goal)
        {
            Goal g = new Goal();
            g.Goals = goal;
            db.Goals.Add(g);
            int res = db.SaveChanges();

            return ("Success");
        }
}

and Angular POST Method looks like following

 save_Goals(){

  let headers : Headers= new Headers();
        headers.append('Content-Type','application/x-www-form-urlencoded');
    headers.append('Access-Control-Allow-Origin','*');
      headers.append('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
      headers.append('Access-Control-Allow-Headers','Content-Type');

      let options = new RequestOptions({ headers: headers });
    return this._http.post('http://localhost:49975/api/Add_Client_/PostGoals?goal=check',options)
       .map(res =>  res.json());
    }

This is work around to send data with URL.

Friday, July 30, 2021
 
1

I have found an answer to my own question. It's not Angular's fault. The thing is I am using CORS.

I have found such information in CORS documentation:

User agents must filter out all response headers other than those that are a simple response header or of which the field name is an ASCII case-insensitive match for one of the values of the Access-Control-Expose-Headers headers (if any), before exposing response headers to APIs defined in CORS API specifications.

The getResponseHeader() method of XMLHttpRequest will therefore not expose any header not indicated above.

It means that I have to simply add a header Access-Control-Expose-Headers: custom-header.

Tuesday, November 16, 2021
 
5

I believe battle.platform45 is not allowing web browsers to do direct calls to their servers. By default, websites from different domains cannot access API resources from other websites.

As according to platform45, you must use Rails to create a game. So I suggest creating your own server that will call from their API server. Then use your AngularJS code to access your server.

I hope this diagram can illustrate it better:

Battle.platform45 Server -- (is called by) --> Your Server -- (is called by) --> Your HTML/Angular JS Code

Friday, December 3, 2021
 
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share