Http post request and cors


#1

Hello,

I’m trying to communicate with the server. I send username/password as json and i get a response back. Everything is cool.
The problem is I’m disabling web security to make sure it works on the web (chromium/lunix).
How can i make an http post request on a real device ? I’ve read a lot of posts and threads about CORS and none worked for me.

I’m using:

angular/http
this.http.post(url, data, headers).subscribe ...etc

headers
headers.append("Accept", 'application/json');
headers.append("Content-Type", 'application/json');

any help / hint would be appreciated!
thanks in advance


#2

Hi @iAhmad89!

What headers are being sent back right now from the server when you do that POST request? (Can be done via Postman, cURL or similar).

What you you mean by disabling web security? Launching Chrome with the disable web security flag to bypass CORS?

Best,
Rodrigo


#3

I’m getting the following headers (using postman):

Date →Tue, 27 Nov 2018 07:05:18 GMT
Server →Apache/2.4.18 (Ubuntu)
Expires →Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control →no-store, no-cache, must-revalidate
Cache-Control →post-check=0, pre-check=0
Pragma →no-cache
Content-Length →97
Keep-Alive →timeout=5, max=100
Connection →Keep-Alive
Content-Type →text/html; charset=utf-8

i just noticed, should i make the serve response with json instead of text ? o:


#4

About the second part, yes. Disabling web security to bypass the CORS. I’ve read it somewhere. This is what i use to bypass it:

chromium-browser --disable-web-security --user-data-dir="/home/rootadmin/.config/chromium"


#5

The problem is that the server is not sending the Access-Control headers required for CORS. You can find more info and instructions based on your web or app server here: https://enable-cors.org/server.html

Once you do this, you won’t have to disable web security in Chrome and it will work in all browsers and devices.


#6

Adding this in wordpress “header(“Access-Control-Allow-Origin: *”);” solves the get request but post request still gives error.


#7

@musabarif If you’re using other methods, you need to specify them with the Access-Control-Allow-Methods: GET, POST, OPTIONS header. Same with the Access-Control-Allow-Headers header if you’re also sending headers in your request.


#8

I have added the below code to my Woocommerce.php

header(‘Access-Control-Allow-Origin: *’);
header(‘Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS’);
header(“Access-Control-Allow-Headers: Content-Type, origin”);

and heres my request->

this.Woocommerce=WC({
url:“http://matrix.com”,
consumerKey:“ck_15def##########”,
consumerSecret:“cs_616870#############”
})

customerData.customer={
“email”:this.newUser.Email,
“username”:this.newUser.Username,
“password”:this.newUser.Password,
“billing_address”:
{
“address_1”:"",
“city”:"",
“state”:"",
“country”:"",
“postcode”:"",
“phone”:this.newUser.Phone
}
}

this.Woocommerce.postAsync("customers",customerData).then((data)=>
{}

this code works perfectly fine on Chrome with disable security but on real device it returns error


#9

@musabarif Actually it doesn’t work in your screenshot because the preflight OPTIONS request to the API (before the actual request, in order to check if CORS is enabled) is returning status 401 Unauthorized. Chrome is telling you that CORS failed because the response doesn’t have an OK status (200 OK).

In any case, it’s not an issue related to Ionic or Cordova but your API. Maybe you can check how to enable CORS in Woocommerce.

To everybody: Please stop disabling web security, that’s never the solution and opens huge security risks. Nobody should never have to disable this, and it’s not even possible it on mobile devices. Fix your CORS problems instead and keep everybody safe :heart:


#10

Thanks for your reply man ,i really appreciate that.


#11

To enable CORS for Woocomerce -> Edit the .htaccess file and add the below code at the top->

Header always set Access-Control-Allow-Origin “*”
Header always set Access-Control-Allow-Methods “GET, POST, PUT, DELETE, OPTIONS”
Header always set Access-Control-Allow-Headers “x-test-header, Origin, X-Requested-With, Content-Type, Accept”

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]