Setting headers with Access-Control-Allow-Origin fails when communicating between servers

[aaronmagi]

I am setting up a HTTP GET between 2 ports on the same server.

localhost:8081
localhost:8082

If I create my rest client without passing in the Access-Control-Allow-Origin header details the HTTP GET will work but Chrome will complain since I have a different origin and host. When I change the header to add Access-Control-Allow-Origin it changes the "Accept" header to be /. I then get a 403 Forbidden error.

Client request/response details when built without Access-Control-Allow-Origin:

Request URL:http://localhost:8082/api/registerDevices
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:8082

Response Headers
view source
Content-Length:0
Date:Wed, 18 May 2016 16:04:11 GMT
Server:Apache-Coyote/1.1

Request Headers
view source
Accept:application/hal+json
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:text/plain
Host:localhost:8082
Origin:http://localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Client request/response details when built with Access-Control-Allow-Origin:

Request URL:http://localhost:8082/api/registerDevices
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:8082

Response Headers
view source
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Content-Length:20
Date:Wed, 18 May 2016 16:28:42 GMT
Server:Apache-Coyote/1.1

Request Headers
view source
Accept:/
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, access-control-allow-origin, content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8082
Origin:http://localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

This error seems to only happen when I am communicating to a different host than the origin. If I add Access-Control-Allow-Origin while communicating to on the same host and origin it works correctly:

Request URL:http://localhost:8081/api/devices?page=1&size=2
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:8081

Response Headers
view source
Content-Type:application/hal+json;charset=UTF-8
Date:Wed, 18 May 2016 16:30:16 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked

Request Headers
view source
Accept:application/hal+json
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Type:text/plain
Host:localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
Query String Parameters
view source
view URL encoded
page:1
size:2

app.js:

client({
        method: 'GET',
        path: ADB_SERVICE+root+REGISTER_DEVICE_ENDPOINT,
         headers: { 'Accept': 'application/hal+json', 'Access-Control-Allow-Origin': '*'  }
    });

client.js

'use strict';

var rest = require('rest');
var defaultRequest = require('rest/interceptor/defaultRequest');
var mime = require('rest/interceptor/mime');
var uriTemplateInterceptor = require('./api/uriTemplateInterceptor');
var errorCode = require('rest/interceptor/errorCode');
var baseRegistry = require('rest/mime/registry');

var registry = baseRegistry.child();

registry.register('text/uri-list', require('./api/uriListConverter'));
registry.register('application/hal+json', require('rest/mime/type/application/hal'));

module.exports = rest
    .wrap(mime, { registry: registry })
    .wrap(uriTemplateInterceptor)
    .wrap(errorCode)
    .wrap(defaultRequest);

package.json

"dependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "rest": "^1.3.2",
    "sockjs-client": "^1.0.3",
    "stompjs": "^2.3.3",
    "webpack": "^1.13.0",
    "when": "^3.7.7",
    "react-bootstrap": "^0.29.3",
    "jquery":  "^2.2.3"

[scothis]

Cross origin requests can be tricky to set up correctly, and will require changes to your server that I cannot help you with. The HTML5 rocks guide to CORS is a good place to get started http://www.html5rocks.com/en/tutorials/cors/.

Your usage of rest.js looks fine and should work once your server returns the correct headers. The only issue I see is that Access-Control-Allow-Origin is a response header and should not be part of the request.

[aaronmagi]

@scothis

How come you just closed this?

The request header using the rest library is being created differently if I pass in one value for the header or 2 values.

Are you saying that is a server issue even though the library is changing the headers?

If I do not supply the Access-Control-Allow-Origin header details the GET works correctly. It is only once the headers get changed does it fail.

I can even put in a fake header and it will fail. Something is going on within the rest library to cause the headers to be incorrectly created.

          client({
        method: 'GET',
        path: ADB_SERVICE+root+REGISTER_DEVICE_ENDPOINT,
         headers: { 'Accept': 'application/hal+json', 'test':'something' }
    });

This will then cause

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type, test
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8082
Origin:http://localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)    Chrome/50.0.2661.102 Safari/537.36

If I do not add anything extra to the headers it WORKS BETWEEN SERVERS:

Request URL:http://localhost:8082/api/registerDevices
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:8082
Response Headers
view source
Content-Length:0
Date:Wed, 18 May 2016 17:21:56 GMT
Server:Apache-Coyote/1.1
Request Headers
view source
Accept:application/hal+json
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:text/plain
Host:localhost:8082
Origin:http://localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

[scothis]

It appears rest.js is working correctly per the CORS spec. Since you're performing a GET, adding custom requests headers will trigger a preflight request instead of making a simple request. In either case, your server will need to handle the request and send back the appropriate CORS response headers.

http://www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests

You'll run into the same issue with or without rest.js. This isn't something I can help you debug further. Sorry.

[aaronmagi]

Hey Scott,

I will continue reading about it.

Thank you

On Wed, May 18, 2016 at 10:32 AM, Scott Andrews notifications@github.com
wrote:

It appears rest.js is working correctly per the CORS spec. Since you're
performing a GET, adding custom requests headers will trigger a preflight
request instead of making a simple request. In either case, your server
will need to handle the request and send back the appropriate CORS response
headers.

http://www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests

You'll run into the same issue with or without rest.js. This isn't
something I can help you debug further. Sorry.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#142 (comment)

[aaronmagi]

Done.

Thank you Scott. I did not know I needed to add it to the server I thought
the headers were just being changed. After reviewing the headers I see
where the updates were going into

1. Access-Control-Request-Headers:
   accept, access-control-allow-origin, content-type

Luckily its super easy with Spring Restful web services.

@crossorigin(origins = "http://localhost:8081")

Have a great day,

Aaron

On Wed, May 18, 2016 at 10:37 AM, Aaron Magi aaronmagi@gmail.com wrote:

Hey Scott,

I will continue reading about it.

Thank you

On Wed, May 18, 2016 at 10:32 AM, Scott Andrews notifications@github.com
wrote:

It appears rest.js is working correctly per the CORS spec. Since you're
performing a GET, adding custom requests headers will trigger a preflight
request instead of making a simple request. In either case, your server
will need to handle the request and send back the appropriate CORS response
headers.

http://www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests

You'll run into the same issue with or without rest.js. This isn't
something I can help you debug further. Sorry.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#142 (comment)