How to receive xhr, json request? about examples

[petersirka]

Hi @Tony-dulei,
can you send me a request headers?

Thanks

[duleitony]

Hey @petersirka
Here is the request headers :
Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4
Access-Control-Request-Headers:x-requested-with, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8005
Origin:null
Pragma:no-cache
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

The errors I got is
"OPTIONS http://localhost:8005/add/ 404 (Not Found) "
"XMLHttpRequest cannot load http://localhost:8005/add/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "

[petersirka]

I can't see content-type ... JSON flag means that body of request must be a JSON and content-type = application/json. Otherwise: you must remove a JSON flag and all will work or you must add a content-type: application/json.

Thanks.

[duleitony]

I found the reason.
The reason is before the browser sends the xhr request, it will send a preflighted request with OPTIONS method.
But I have no route for OPTIONS method.
Do you have any idea for this?

Thanks,

[petersirka]

Here is simple example:
https://github.com/totaljs/examples/blob/master/cors/controllers/default.js

Thanks.

[duleitony]

I tried your example.
But it did not work.

Remote Address:127.0.0.1:8005
Request URL:http://localhost:8005/time/
Request Method:OPTIONS
Status Code:404 Not Found
Request Headersview source
Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8005
Origin:**
Pragma:no-cache
Referer:**
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Response Headersview source
Cache-Control:private
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/plain; charset=utf-8
Date:Wed, 11 Jun 2014 10:39:49 GMT
Mode:debug
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:total.js v1.4.0
ConsoleSearchEmulationRendering

[petersirka]

I know where is the problem.
Please download latest version from GitHub. Tomorrow I'll publish total.js hotfix into the NPM.

I fixed "options" flag in latest version (v1.5.2).
Download framework from GitHub and give me a feedback.

Many thanks.

[duleitony]

Hey
I downloaded the latest version from GitHub.
The "options" flag now is working.
But the cors is still not working.

It looks like the prefighted request is ok

Remote Address:10.0.201.38:80
Request URL:http://**/add/
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Host:token.dev-jpe1.rakuten.rpaas.net
Origin:http://localhost:8006
Pragma:no-cache
Proxy-Connection:keep-alive
Referer:http://localhost:8006/xhr.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, Content-Type
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:
Cache-Control:private, no-cache, no-store, must-revalidate
Connection:Keep-Alive
Content-Encoding:gzip
Content-Type:application/json; charset=utf-8
Date:Thu, 12 Jun 2014 01:35:39 GMT
Mode:debug
Proxy-Connection:Keep-Alive
Server:nginx
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:total.js v1.5.2

But the second one could not work.

Request URL:http://*********/add/
Request Headers CAUTION: Provisional headers are shown.
Accept:application/json
Cache-Control:no-cache
Content-Type:application/json
Origin:http://localhost:8006
Pragma:no-cache
Referer:http://localhost:8006/xhr.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Request Payload
[object Object]

[duleitony]

Sorry, its working now.
My request headers were not enough.

Thank you for your answers.
I think I can write an example how to use CORS with json using totaljs.

Totaljs is really good to use.
Though I am still a young guy for JavaScript, I am enjoying using totaljs.
If possible, I would like to do some development for totaljs with you.

If you need some volunteers, tell me.
[email protected]

Thanks

Tony

[petersirka]

I think I can write an example how to use CORS with json using totaljs
This is good idea.

If you need some volunteers, tell me.
Yes, I really appreciate it. Everyone can help with building the framework and everything around it.

Many thanks.

[duleitony]

Sorry,

I met new problem about this issue.
I tried to do testing using IE 8.
But I got error response.
I tried following routes:

framework.route('/add/', add, ['xhr', 'post']);
framework.route('/add/', add, ['+xhr']);
framework.route('/add/', add, ['post']);
framework.route('/add/', add, ['+xhr', 'post']);
framework.route('/payvault/add/', add, ['raw', 'post']);

I got the '400' status.
I checked the request's Content-Type header is "text/plain"
We cannot change this header in IE8, when we do cross-domain request.

Do you have any idea about this?
POST:http://domain.tld/api
Content-Type: text/plain

Sorry for bothering you too many times.

[duleitony]

I fixed it like this:
framework.route('/payvault/add/', add, ['post', 'raw',]);

[petersirka]

@Tony-dulei super, thanks 👍