Develop Reference

Fetching from CORS-API not allowed for localhost

I'm working on a React App which needs to fetch data from an Api.
I made it work with fake data.
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
return json;
})
Now i wanted to get data from our local Api with Apigility.
fetch('http://localserver:8081/news')
.then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
return json;
})
But i get net::ERR_ABORTED 403 (The origin "http://localho.st:5000" is not authorized). The app was created with create-react-app and gets served by its run script.
Now the thing is it works, when i enter http://localserver:8081/news in Firefox and Edge. I receive the json data. The same when trying it with my phone, curl or an api tester.
This is the answer when trying to fetch from the app:
HTTP/1.1 403 The origin "http://localhost:3000" is not authorized
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 12:59:08 GMT
Content-Length: 0
And when calling from browser:
HTTP/1.1 200 OK
Content-Type: application/hal+json
Vary: Origin
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
WWW-Authenticate: Bearer realm="Service"
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 13:03:08 GMT
Content-Length: 133933
I've read about setting up a proxy to get CORS calls, but i wondered if there are other solutions to this problem.
EDIT:
localserver:
GET /news HTTP/1.1
Host: 10.254.2.10:8081
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://localhost:3000
Referer: http://localhost:3000/
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
HTTP/1.1 403 The origin "http://localhost:3000" is not authorized
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 14:15:22 GMT
Content-Length: 0
https://jsonplaceholder.typicode.com/posts
Host: jsonplaceholder.typicode.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Origin: http://localhost:3000
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Referer: http://localhost:3000/
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
HTTP/3 200 OK
date: Thu, 07 Oct 2021 14:17:37 GMT
content-type: application/json; charset=utf-8
x-powered-by: Express
x-ratelimit-limit: 1000
x-ratelimit-remaining: 999
x-ratelimit-reset: 1633547463
access-control-allow-origin: http://localhost:3000
vary: Origin, Accept-Encoding
access-control-allow-credentials: true
cache-control: max-age=43200
pragma: no-cache
expires: -1
x-content-type-options: nosniff
etag: W/"6b80-Ybsq/K6GwwqrYkAsFxqDXGC7DoM"
via: 1.1 vegur
cf-cache-status: HIT
age: 4307
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=qYfd07Dc%2BG9NUgzVp1DHMPuBcDx8UOvlbWfDD51OGSN8s74yaJFooN99m7nG4NSHV%2BeqY78Qw%2Bb7ozFdWCmF8ngPRnQPc3tlVdrSwGy8TKWYLwWSEYI4YE88GU5yyErQ8P5jLa5tUkPnB4FA6mg7"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 69a7c10bdbf66d8f-MUC
content-encoding: br
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400, h3-28=":443"; ma=86400, h3-27=":443"; ma=86400

Create-React-App comes with a simple way to handle this: add a proxy field to your package.json file as shown below. In this case, a request is made from server A to server B
"proxy": "http://localserver:8081/",

You can run a local reverse proxy to get the API calls from the same origin (say mapping localhost:3000/api/news to localhost:8081/news) but then it'd probably be easier to set up a CORS proxy.
You could try to make the API JSONP and circumvent the same origin policy that way, but this is likely also more hairy than setting up a CORS proxy.
Long story short: Whenever you make requests across origins, CORS needs to be set up.

Ajax/Axios cookies not being set, but still being included in following requests

For some reason cookies set by server are not being saved, can't access them from within my js code, in devtools in Application tab in cookies section it's all empty, but somehow when I make a request to the server after the initial one, those cookies that apparently didn't save are being included in the header.
I have set withCredentials to true in axios config, as well as CORS_ALLOW_CREDENTIALS to true on my backend.
Here are the headers from the request that should save cookies:
Response Header:
access-control-allow-credentials: true
access-control-allow-origin: <frontend url>
content-length: 22
content-type: text/html; charset=utf-8
date: Mon, 01 Feb 2021 12:04:09 GMT
server: nginx/1.19.2
set-cookie: csrftoken=<token>; expires=Mon, 31 Jan 2022 12:04:09 GMT; Max-Age=31449600; Path=/; SameSite=Lax
set-cookie: sessionid=<sessionid>; expires=Mon, 01 Feb 2021 13:04:09 GMT; HttpOnly; Max-Age=3600; Path=/
strict-transport-security: max-age=31536000
vary: Cookie, Origin
x-frame-options: SAMEORIGIN
Request Headers:
:authority: <backend url>
:method: POST
:path: /login/
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 66
content-type: application/json;charset=UTF-8
dnt: 1
origin: <frontend url>
pragma: no-cache
referer: <current frontend url query>
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
As you can see in the response I'm getting two cookies to be set, sessionid and csrftoken, those are not being saved.
What's weird those cookies are present in the following request:
Request Headers:
:authority: <backend url>
:method: GET
:path: /numbers/
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
cookie: csrftoken=<token>; sessionid=<sessionid>
dnt: 1
origin: <frontend url>
pragma: no-cache
referer: <current frontend url query>
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
How is it possible for the cookies to not be set but still included in the request? And what can cause this behavior? I really need them to be saved.
My backend and frontend are located at different urls, my backend is running on Django with a rest-framework.
UPDATE
I've also tried to set samesite on the cookies to none, as well as changing request content-type to application/x-www-form-urlencoded. Still no luck.

After hours spent troubleshooting this problem I found out a solution, somewhat. My frontend app and backend app are hosted from different urls, but under the same domain, like that: <frontend>.<mydomain>.com and <backend>.<mydomain>.com
When frontend application was making a request to the backend, backend was sending set-cookie headers that would save the cookies under <backend>.<mydomain>.com (I was able to confirm this in here: chrome://settings/siteData), which made them inaccessible from within <frontend>.<mydomain>.com, I were able to fix that by adding a domain property to the set-cookie header that would point to .<mydomain>.com. To do that I had to create a middleware in Django that would add my predefined domain name to the cookies before being send back to the client.
I'm not really 100% happy with this because if my applications were served from different domains, I'm not sure if I could make the cookies work at all, since setting set-cookie to a different domain is not allowed by the browser.

Setting a cookie with a webpack-dev-server client and hapi API

I have a ReactJS client running webpack-dev-server on localhost:3000. It connects to a Hapi API server on localhost:8080 and I'm trying to provide a basic cookie using hapi-auth-jwt2 (I've also tried hapi-auth-cookie with equal results).
I can see the response header provides a valid set-cookie header and everything looks okay, but all my browser tests ignore it and the cookie is never set (verified by checking document.cookie and using the browser tools like Chrome's Application tab). When I connect directly to the API server with Postman, it picks up the set-cookie header correctly and stores it so I think it's just some kind of domain/port/host configuration issue.
As a simple test, I tried deploying to our ec2 environment but that didn't help. The ec2 environment is similar, with one instance serving the client and another instance serving the API. I've also tried modifying my local hosts file to redirect a domain like 127.0.0.1 example.com and providing the domain=.example.com field in the cookie, but that also didn't help.
I think I'm just missing something basic but I don't know what it is. See below for response/request headers on login.
Request Headers
POST /login HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
Origin: http://localhost:3000
Authorization: undefined
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Content-Type: application/json
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Response Headers
HTTP/1.1 200 OK
authorization: <jwt token>
vary: origin,accept-encoding
access-control-allow-origin: http://localhost:3000
access-control-allow-credentials: true
access-control-expose-headers: WWW-Authenticate,Server-Authorization
content-type: application/json; charset=utf-8
set-cookie: cookie=token; Max-Age=604800; Expires=Wed, 16 May 2018 21:11:23 GMT; SameSite=Lax; Path=/
cache-control: no-cache
content-encoding: gzip
Date: Wed, 09 May 2018 21:11:23 GMT
Connection: keep-alive
Transfer-Encoding: chunked

http-proxy-middleware, which webpack-dev-server uses, has options for cookie domain/path rewrites.
You should see if those satisfy your needs. Otherwise you can also manually parse and reset cookies in the onProxyRes callback. Here is an example.

Chrome not persisting CORS cookie

The setup uses a Backbone Model, Nginx server. The users enter their username and password which is then passed via a post. The server authenticates and returns a session cookie.
When the backend and front-end are on the same server (e.g. connect via localhost) the cookie is stored. However when the connection is remote, it is not stored in Chrome; however, it is stored in Safari and FireFox.
Ajax is setup via
$.ajaxSetup({
crossDomain: true,
xhrFields: {
withCredentials: true
}
});
The request headers are
POST /login HTTP/1.1
Host: localhost:8102
Connection: keep-alive
Content-Length: 59
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1:9102
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36
Content-Type: application/json
DNT: 1
Referer: http://127.0.0.1:9102/somefolder
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
The response headers are
HTTP/1.1 200 OK
access-control-allow-origin: http://127.0.0.1:9102
access-control-allow-credentials: true
vary: origin,accept-encoding
access-control-expose-headers: WWW-Authenticate,Server-Authorization
content-type: text/html; charset=utf-8
set-cookie: na-auth-token=encrypted-string; Max-Age=86400; Expires=Thu, 27 Apr 2017 13:32:44 GMT; HttpOnly; SameSite=Strict; Path=/
cache-control: no-cache
content-encoding: gzip
Date: Wed, 26 Apr 2017 13:32:44 GMT
Connection: keep-alive
Transfer-Encoding: chunked
In FireFox and Safari the cookie is stored just fine, but in Chrome it gets the response and tosses the cookie without any notification.
Update
The cookie is actually being saved under the localhost domain, however when you navigate back to the page (e.g. via a window.location.reload) the cookie disappears.

So the answer to my question lied in a library we were using
hapi-auth-cookie
The package updated and a flag was introduced isSameSite. Changed this value to false to allow the cors cookie to persist between pages loads.

http cache and fingerprinting usage

I am trying to understand how http cache and fingerprinting
works. I've setup my express server to cache assets forever like this:
router.use('/public',
express.static(path.join(__dirname, '..', 'public'),
{ maxAge: 864000000 }));
I am expecting this to cache assets forever, even if i change the
content of the files, thus i will need to fingerprint the filenames to
bust the cache. However;
This is Google Chrome Headers output for static asset common.js after a reload
Remote Address:192.168.56.101:3000
Request URL:http://192.168.56.101:3000/public/assets2/scripts/app/common.js
Request Method:GET
Status Code:304 Not Modified
Request Headers
GET /public/assets2/scripts/app/common.js HTTP/1.1
Host: 192.168.56.101:3000
Connection: keep-alive
Cache-Control: max-age=0
Accept: */ *
If-None-Match: W/"ogrxaeWybJBlXMTTr2leWA=="
If-Modified-Since: Fri, 11 Jul 2014 13:46:01 GMT
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: http://192.168.56.101:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Response Headers
HTTP/1.1 304 Not Modified
X-Powered-By: Express
Accept-Ranges: bytes
Date: Fri, 11 Jul 2014 13:48:34 GMT
Cache-Control: public, max-age=864000
Last-Modified: Fri, 11 Jul 2014 13:46:01 GMT
ETag: W/"ogrxaeWybJBlXMTTr2leWA=="
Connection: keep-alive
Nice, i get a 304.
Now i change the contents of common.js and do a reload again, this is the output:
Remote Address:192.168.56.101:3000
Request URL:http://192.168.56.101:3000/public/assets2/scripts/app/common.js
Request Method:GET
Status Code:200 OK
Request Headers
GET /public/assets2/scripts/app/common.js HTTP/1.1
Host: 192.168.56.101:3000
Connection: keep-alive
Cache-Control: max-age=0
Accept: */ *
If-None-Match: W/"ogrxaeWybJBlXMTTr2leWA=="
If-Modified-Since: Fri, 11 Jul 2014 13:46:01 GMT
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: http://192.168.56.101:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Response Headers
HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Date: Fri, 11 Jul 2014 13:50:35 GMT
Cache-Control: public, max-age=864000
Last-Modified: Fri, 11 Jul 2014 13:50:33 GMT
ETag: W/"o65+0J5C8swpsmHMxNPH+w=="
Content-Type: application/javascript
Content-Length: 1908322
Connection: keep-alive
At this point, i was expecting to get a 304 but
appearently server detected the changes and sent a 200.
So i didn't have to use fingerprinting. Where did i go wrong?

Express is permanently caching it on the server side by keeping it in memory. My guess is that the express framework maintains cache consistency by checking whether or not cached resource has been modified.
Sending a request with a if-none-match and/or a if-modified-since header is the correct behavior for a user-agent. IE is attempting optimization by skipping a network round-trip, which may lead to incorrectly loaded pages.
What you need to do is either use fingerprinting - which assigns a new generic name to each modified resource - or have more low-level control about how your server serves resources, i.e. parsing the url yourself and defining rules about how responses are formed, a 304 response in your case.

I think the issue is with the Google Chrome, apparently when i hit reload, or press enter on url bar, Chrome still sends a If-None-Match request to server, and gets a 200. I tried with Internet Explorer, and it successfully server from cache without hitting the server. I am still wondering what is wrong with Chrome though, and how do i make it serve from cache without hitting the server.