Magento Question posted in
The official documentation can be found here.

How to solve the CORS issue when the endpoint doesn't accept OPTIONS method? – Magento

I’m building mobile client apps for easily manage Magento E-commerce store, I;m using the Token Based authentication here , I’m using ionic2 for my mobile framework.

My problem is, The angular HTTP is sent OPTIONS request instead of POST to /V1/integration/admin/token endpoint that produce 400 bad request because the endpoint doesn’t support the OPTIONS method.

here my code :

    import { Injectable } from '@angular/core';
    import { Http, Headers, RequestOptions } from '@angular/http';
    import 'rxjs/add/operator/map';
    import { BaseConfig } from '../../config';
    
    @Injectable()
    export class AuthProvider {
    
      public data: any;
    
      public option: any;
    
      constructor(public http: Http) {
        console.log('Hello AuthProvider Provider');
    
      }
    
      login(creds: any) {
        
        let headers = new Headers({
          'Content-Type': 'application/json'
        });
    
        let option = new RequestOptions({
          headers: headers,
        });
    
        return new Promise((resolve) => {
          this.data = this.http.post(BaseConfig.base_url + 'integration/admin/token', creds, option)
            .map(res => res.json())
              .subscribe((data) => {
                resolve(this.data);
              },
              (error) => {
                resolve(this.data);
              }
            );
        });
    
      }  
  
   }

I also including the CORS header on my .htaccess

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "Content-Type"

so the real issue is how to prevent angular http requested with OPTIONS method (i think impossible because is preflighted request).

Thanks!

Tags:

3

Answers


  1. 0

    You can add your own server in between (like a proxy) that (doesn’t require CORS when the HTML content is loaded from the same URL+port)
    or you can use JSONP which is quite limited though.

    Otherwise you’ll need to configure the server to support OPTIONS. The OPTIONS request is a preflight request and the browser won’t make the POST request if it doesn’t get the expected response from the OPTIONS request.

    Login or Signup to reply.
  2. 0

    May be below example can get you the thing what you want.

    login(creds: any) {

        let headers = new Headers({
          'Content-Type': 'application/json',
        });

        let option = new RequestOptions({
          headers: headers,
          withCredentials:true
        });

        return new Promise((resolve) => {
          this.data = this.http.post(BaseConfig.base_url + 'integration/admin/token', creds, option)
            .map(res => res.json())
              .subscribe((data) => {
                resolve(this.data);
              },
              (error) => {
                resolve(this.data);
              }
            );
        });

      }
    Login or Signup to reply.
  3. 0

    I don’t know the reason, but i think you should try it in the real device.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search