No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Marenz

Posted Sun, 26 Jan 2014 17:57:01 GMT

Reply

Hello,

I am building a small server with an API to receive & return json objects through http POST/GET.

From js, I tried calling my server using

  $.ajax({
        url: "http://my.domain:8989/register",
        type: "POST",
        crossDomain: true,
        data: { apiKey: "23462", method: "example", ip: "208.74.35.5" },
        success: function (result) {
            resultDiv.innerHTML=result;
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });

Which gives the error:

XMLHttpRequest cannot load http://my.domain:8989/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

On the server I see something like

IP - - 2014-Jan-26 17:56:15.0144105Z "OPTIONS /register HTTP/1.1" 404 455 "http://localhost/supraball/serverlist.html" "uagent"

So there is an OPTION request to which it response with 404.
How can I respond to OPTION requests and/or how can I add the required header "Access-Control-Allow-Origin"?

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Florin

Posted Mon, 03 Feb 2014 06:34:07 GMT in reply to Marenz

Reply

Hello,

I am interested in this also, couldn't find anything in the api to help with this.

You could write the header in the web-server I guess, but it would be awkward to set-up the development environment.

CORS on the server

Florin

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Sönke Ludwig

Posted Mon, 03 Feb 2014 08:44:58 GMT in reply to Marenz

Reply

On Sun, 26 Jan 2014 17:57:01 GMT, Marenz wrote:

Hello,

I am building a small server with an API to receive & return json objects through http POST/GET.

From js, I tried calling my server using
  $.ajax({
        url: "http://my.domain:8989/register",
        type: "POST",
        crossDomain: true,
        data: { apiKey: "23462", method: "example", ip: "208.74.35.5" },
        success: function (result) {
            resultDiv.innerHTML=result;
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
Which gives the error:
XMLHttpRequest cannot load http://my.domain:8989/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 
On the server I see something like
IP - - 2014-Jan-26 17:56:15.0144105Z "OPTIONS /register HTTP/1.1" 404 455 "http://localhost/supraball/serverlist.html" "uagent"
So there is an OPTION request to which it response with 404.
How can I respond to OPTION requests and/or how can I add the required header "Access-Control-Allow-Origin"?

The most simple way to solve this would be to explicitly add a route for this in the URLRouter:

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
    res.writeBody("");
}

auto router = new URLRouter;
router.match(HTTPMethod.options, "/register", &sendOptions);
// ...

Plus probably the header should also be sent with every other response:

void addACAO(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
}

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    addACAO(req, res);
    res.writeBody("");
}

auto router = new URLRouter;
router.any("*", &addACAO);
router.match(HTTPMethod.options, "*", &sendOptions);
// ...

The "*" for the header value should also probably be something more specific for the application.

Currently there is not really a sane way to implement this directly in vibe.d. But later, when the high level web framework in vibe.web gets some more features, that would be a good place to add something like this by default.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Florin

Posted Mon, 03 Feb 2014 12:51:25 GMT in reply to Sönke Ludwig

Reply

Thanks,

I'll give it a try in the evening.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Florin

Posted Fri, 07 Feb 2014 12:58:43 GMT in reply to Florin

Reply

Yes, this is working, thanks for your help, much appreciated!

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Sean Kelly

Posted Fri, 07 Feb 2014 17:08:02 GMT in reply to Florin

Reply

CORS is intended to prevent cross-site scripting attacks, and its correct use is a tad more complicated than just adding that one header. Basically, the client can pre-flight any request by issuing an OPTIONS request to the same URL, plus all responses need a header or two in place. And you should require and validate an incoming "Origin" header on requests. So while that fix has gotten things working in your case, it's just a band-aid. For a production service you probably want to do it right :-)

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Dennis R. Arriola

Posted Fri, 14 Mar 2014 18:28:58 GMT in reply to Sönke Ludwig

Reply

On Mon, 03 Feb 2014 08:44:58 GMT, Sönke Ludwig wrote:

On Sun, 26 Jan 2014 17:57:01 GMT, Marenz wrote:
Hello,

I am building a small server with an API to receive & return json objects through http POST/GET.

From js, I tried calling my server using
  $.ajax({
        url: "http://my.domain:8989/register",
        type: "POST",
        crossDomain: true,
        data: { apiKey: "23462", method: "example", ip: "208.74.35.5" },
        success: function (result) {
            resultDiv.innerHTML=result;
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
Which gives the error:
XMLHttpRequest cannot load http://my.domain:8989/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 
On the server I see something like
IP - - 2014-Jan-26 17:56:15.0144105Z "OPTIONS /register HTTP/1.1" 404 455 "http://localhost/supraball/serverlist.html" "uagent"
So there is an OPTION request to which it response with 404.
How can I respond to OPTION requests and/or how can I add the required header "Access-Control-Allow-Origin"?
The most simple way to solve this would be to explicitly add a route for this in the URLRouter:
void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
    res.writeBody("");
}

auto router = new URLRouter;
router.match(HTTPMethod.options, "/register", &sendOptions);
// ...
Plus probably the header should also be sent with every other response:
void addACAO(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
}

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    addACAO(req, res);
    res.writeBody("");
}

auto router = new URLRouter;
router.any("*", &addACAO);
router.match(HTTPMethod.options, "*", &sendOptions);
// ...
The "*" for the header value should also probably be something more specific for the application.

Currently there is not really a sane way to implement this directly in vibe.d. But later, when the high level web framework in vibe.web gets some more features, that would be a good place to add something like this by default.

Hi! Where can I add the code you've given. I'm confused. Im using angularJS and got the same error. I hope to get a response on this. Thanks

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

Sönke Ludwig

Posted Wed, 19 Mar 2014 11:22:23 GMT in reply to Dennis R. Arriola

Reply

On Fri, 14 Mar 2014 18:28:58 GMT, Dennis R. Arriola wrote:

On Mon, 03 Feb 2014 08:44:58 GMT, Sönke Ludwig wrote:
(...)
The most simple way to solve this would be to explicitly add a route for this in the URLRouter:
void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
    res.writeBody("");
}

auto router = new URLRouter;
router.match(HTTPMethod.options, "/register", &sendOptions);
// ...
Plus probably the header should also be sent with every other response:
void addACAO(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
}

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    addACAO(req, res);
    res.writeBody("");
}

auto router = new URLRouter;
router.any("*", &addACAO);
router.match(HTTPMethod.options, "*", &sendOptions);
// ...
The "*" for the header value should also probably be something more specific for the application.

Currently there is not really a sane way to implement this directly in vibe.d. But later, when the high level web framework in vibe.web gets some more features, that would be a good place to add something like this by default.
Hi! Where can I add the code you've given. I'm confused. Im using angularJS and got the same error. I hope to get a response on this. Thanks

Sorry that the answer took so long, I've been very busy with non-computer-related things recently.

If your project is organized similarly to the example in the first steps section, you'd insert the any and match method calls right after the URLRouter has been created. All other routes go after those calls. This will make sure that the router first calls addACAO to add the header, before falling through to the regular routes (it falls through because addACAO doesn't write a respnse). addACAO and sendOptions can basically be defined anywhere, but probably somewhere down in the same module.

For the "first steps" example, it would look like this:

import vibe.d;

shared static this()
{
	auto router = new URLRouter;
	router.any("*", &addACAO);
	router.match(HTTPMethod.options, "*", &sendOptions);
	router.get("/", &index);
	// add other routes here

	auto settings = new HTTPServerSettings;
	settings.port = 8080;

	listenHTTP(settings, router);
}

void addACAO(HTTPServerRequest req, HTTPServerResponse res)
{
	res.headers["Access-Control-Allow-Origin"] = "*";
}

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
	addACAO(req, res);
	res.writeBody("");
}

void index(HTTPServerRequest req, HTTPServerResponse res)
{
	res.render!("index.dt", req);
}

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Permalink: HTTP NNTP

丿爱你永远

Posted Mon, 11 Mar 2019 08:11:05 GMT in reply to Sönke Ludwig

Reply

On Mon, 03 Feb 2014 08:44:58 GMT, Sönke Ludwig wrote:

On Sun, 26 Jan 2014 17:57:01 GMT, Marenz wrote:
Hello,

I am building a small server with an API to receive & return json objects through http POST/GET.

From js, I tried calling my server using
  $.ajax({
        url: "http://my.domain:8989/register",
        type: "POST",
        crossDomain: true,
        data: { apiKey: "23462", method: "example", ip: "208.74.35.5" },
        success: function (result) {
            resultDiv.innerHTML=result;
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
Which gives the error:
XMLHttpRequest cannot load http://my.domain:8989/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 
On the server I see something like
IP - - 2014-Jan-26 17:56:15.0144105Z "OPTIONS /register HTTP/1.1" 404 455 "http://localhost/supraball/serverlist.html" "uagent"
So there is an OPTION request to which it response with 404.
How can I respond to OPTION requests and/or how can I add the required header "Access-Control-Allow-Origin"?
The most simple way to solve this would be to explicitly add a route for this in the URLRouter:
void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
    res.writeBody("");
}

auto router = new URLRouter;
router.match(HTTPMethod.options, "/register", &sendOptions);
// ...
Plus probably the header should also be sent with every other response:
void addACAO(HTTPServerRequest req, HTTPServerResponse res)
{
    res.headers["Access-Control-Allow-Origin"] = "*";
}

void sendOptions(HTTPServerRequest req, HTTPServerResponse res)
{
    addACAO(req, res);
    res.writeBody("");
}

auto router = new URLRouter;
router.any("*", &addACAO);
router.match(HTTPMethod.options, "*", &sendOptions);
// ...
The "*" for the header value should also probably be something more specific for the application.

Currently there is not really a sane way to implement this directly in vibe.d. But later, when the high level web framework in vibe.web gets some more features, that would be a good place to add something like this by default.