kept receiving a 404 while trying to access a basic crow server from a js fetch request

[percyteng]

Here is my basic crow server

crow::SimpleApp app;

CROW_ROUTE(app, "/")
.methods("GET"_method)
([](){
		crow::json::wvalue x;
	    x["message"] = "Hello, World!";
	    return x;
});
CROW_ROUTE(app, "/api")([](){
	crow::json::wvalue x;
	x["message"] = "Hello, World!";
	return x;
});

app.port(4500).multithreaded().run();

I was trying to send a standard fetch request from Javascript, however, I kept receiving a 404 request from it.
When I tried to access the crow server on both browser and postman, they work!
So I am not sure if there is something wrong with my js fetch or just crow itself. Here is my fetch

return fetch('http://localhost:4500', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((response) => {
console.log(response)
if (response.status != 200){
console.log('errors')
return
}
else{
return response.json()
}
})
.then((responseJson)=>{
console.log(responseJson)
})
.catch((error) => {
console.error(error);
});

[Shravan40]

You need to add cross origin support.

[percyteng]

@Shravan40 Can you please share me an example of how to enable the cors in crow? Thanks!

[Shravan40]

You can try adding
res.add_header("Access-Control-Allow-Origin", "*");
and, possibly, by a few:
res.add_header("Access-Control-Allow-Headers", "Content-Type");

[percyteng]

@Shravan40 I am not sure where to add this line tho? I don't see variable res anywhere in either crow server or my js request

[Shravan40]

@percyteng : Please go through this issue thread.

[percyteng]

@Shravan40 if you are saying adding the header to my js request, I have tried plenty of times. But my issue doesn't seem like it's related to cross-origin at all especially when I have this chrome extension to explicitly enable no cors on any request.

[percyteng]

@Shravan40 I think I am getting what you are saying

Tried to do this
CROW_ROUTE(app, "/")
.methods("GET"_method)
([](const crow::request& req){
const crow::response& res;
res.add_header("Content-Type", "text/plain");
crow::json::wvalue x;
x["message"] = "Hello, World!";
// return x;
});
but the add_header gives me an error
Invalid arguments '
Candidates are:
void add_header(std::__1::basic_string<char,std::__1::char_traits,std::__1::allocator>, std::__1::basic_string<char,std::__1::char_traits,std::__1::allocator>)
'
I looked into add_header function and seems like my parameters should be right

[pierobot]

You're getting that error because you're trying to access a non-const method in a const variable.

const crow::response& res; // <--- const variable - and is an invalid reference
res.add_header("Content-Type", "text/plain"); // <--- add_header modifies res (non-const method)

The correct way to access the crow::response is to do use the following

CROW_ROUTE(app, "/")([](const crow::request&, crow::response& response)
{
    response.add_header(...);

    // write your data with this
    response.write(...);

    return response;
});

[percyteng]

@pierobot Hi! I actually tried that before, but I was getting these errors
error: static_assert failed "Handler function with response argument should have void return type"
and error:call to implicitly-deleted copy constructor of 'crow::response'
Seems like it wants me to return nothing when there is response argument.

[pierobot]

Oh sorry, it's been a while.

This should do the trick

CROW_ROUTE(app, "/")([](const crow::request&, crow::response& response) -> void
{
    response.add_header(...);

    // write your data with this
    response.write(...);
    response.end();
});

I believe you can also do

CROW_ROUTE(app, "/")([]()
{
    crow::response response;
    response.add_header(...);

    // write your data with this
    response.write(...);

    return response;
});

[percyteng]

@pierobot that worked! but my issue is still not resolved
right now my default route is like this
CROW_ROUTE(app, "/")
.methods("GET"_method)
([](const crow::request&, crow::response& response){
string key = "Access-Control-Allow-Origin";
string value = "*";
response.add_header(key, value);
crow::json::wvalue x;
x["message"] = "Hello, World!";
response.write("hehehe");
response.end();
});

but I am still getting the 404 error. and if I disabled the chrome extension for cors. I am also getting the Access-Controll-Allow-Origin error: No 'Access-Control-Allow-Origin' header is present on the requested resource. This error should be resolved by adding the header to res in crow response though.

[pierobot]

Perhaps #207 (comment) will help you

[percyteng]

@pierobot @Shravan40 is it possibly related to OPTIONS? Looking at the log, instead of getting a GET request, seems like my crow is getting an OPTIONS request which triggers a 404. But I have indeed sent a GET request from my js fetch tho

[pierobot]

Yes that seems to be the case.
The docs imply that an OPTIONS request will be sent BEFORE the other method.

[percyteng]

@pierobot I think I found a solution! I added both request types to my handler
CROW_ROUTE(app, "/")
.methods("OPTIONS"_method, "GET"_method)
Seems to work!

Really appreciate the help!