I'm trying to set the response headers in my interceptor, and have had no luck with any method I've found yet. I've tried:
const request = context.switchToHttp().getRequest();
const response = context.switchToHttp().getResponse();
<snippet of code from below>
return next.handle();
request.res.headers['my-header'] = 'xyz'
response.header('my-header', 'xyz')
response.headers['my-header'] = 'xyz'
response.header['my-header'] = 'xyz'
with no luck. The first option says that res is undefined, the second "Cannot read property 'Symbol(fastify.reply.headers)' of undefined", and the others just do nothing.
I have the following working for me with the FastifyAdapter in my main.ts:
HeaderInterceptor
#Injectable()
export class HeaderInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
return next.handle().pipe(
tap(() => {
const res = context.switchToHttp().getResponse<FastifyReply<ServerResponse>>();
res.header('foo', 'bar');
})
);
}
}
Using .getResponse<FastifyReply<ServerResponse>>() gives us the correct typings to work with.
AppModule
#Module({
imports: [],
controllers: [AppController],
providers: [
AppService,
{
provide: APP_INTERCEPTOR,
useClass: HeaderInterceptor,
},
],
})
export class AppModule {}
Bind the interceptor to the entire server
curl Command
▶ curl http://localhost:3000 -v
* Rebuilt URL to: http://localhost:3000/
* Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< foo: bar
< content-type: text/plain; charset=utf-8
< content-length: 12
< Date: Thu, 14 May 2020 14:09:22 GMT
< Connection: keep-alive
<
* Connection #0 to host localhost left intact
Hello World!%
As you can see, the response comes back with the header foo: bar meaning the interceptor added what was expected.
Looking at your error, it looks like your second attempt may have actually been response.headers('my-header', 'xyz). Whatever the case, the above is working for me on a nest new application, and on the latest version of Nest's packages.
Related
My frontend (Expo Go web) is running at http://localhost:19006/ but when it receives a response from the backend, it somehow believes it runs under https://localhost:19006/
Also, the iOS version of Expo Go logs the following error:
LOG [AxiosError: Network Error]
I'm using Flask in the backend with CORS set as follows:
app = Flask(__name__)
app.config['DEBUG'] = True
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['SECRET_KEY'] = os.environ.get("SECRET_KEY", 'xxx')
cors = CORS(app, resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*", "Access-Control-Allow-Origin": "*"}})
and a simple return function:
#app.route("/matches", methods=["GET"])
def getMatches():
print('request for matches')
response = matches.getMatches()
return response
if __name__ == '__main__':
app.run(ssl_context=('certs/cert.pem', 'certs/key.pem'))
My frontend part is using react native with Expo Go. The query to the backend is done this way:
export default function App() {
const axiosApiCall = () => {
const config = {
headers:{
'origin': 'https://localhost:19006' #<- Here also tried http but no change
}
};
axios
.get("https://127.0.0.1:5000/matches", config)
.then((response) => {
setState({quote : 'yes'});
console.log(response.data);
})
.catch((error) => {
console.log(error);
})
}
The backend works properly fine as I can see in Postman. The result is technically showing up in the response of the web-version of Expo Go, however, it appears that there's an issue with CORS:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://127.0.0.1:5000/matches. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://localhost:19006’).
And here's the response header:
HTTP/1.1 200 OK
Server: Werkzeug/2.2.2 Python/3.9.16
Date: Thu, 05 Jan 2023 10:16:42 GMT
Content-Type: application/json
Content-Length: 274552
Access-Control-Allow-Origin: http://localhost:19006
Access-Control-Expose-Headers: *
Vary: Origin
Connection: close
GET /matches HTTP/1.1
Host: 127.0.0.1:5000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Origin: http://localhost:19006
DNT: 1
Connection: keep-alive
Referer: http://localhost:19006/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-GPC: 1
Anyone any idea? Thanks!!!
Hardcoding the CORS origins: no change
Changing the query from axios to async fetch calls: no change
Including/modifying the header in the axios config: no change
Other browsers: no change
Deactivating SSL in the backend: caused other problems related to react native
I'm trying to use the v3 api to create a pre signed url for uploading. I am able to use this config to access other parts of the api just fine.
I'm running minio in a docker container and my code is running in another container.
Below is how I'm generating a presigned url:
import { PutObjectCommand, S3, S3Client } from "#aws-sdk/client-s3"
import { getSignedUrl } from "#aws-sdk/s3-request-presigner"
const config = {
endpoint: "http://minio:9000",
forcePathStyle: true,
region: 'us-east-1',
credentials: {
accessKeyId: '...',
secretAccessKey: '...',
}
}
const client = new S3Client(config)
const command = new PutObjectCommand({
Bucket: 'uploads',
Key: 'test123',
});
const url = await getSignedUrl(this.client, command, { expiresIn: 3600 });
And then that produces a url such as:
http://minio:9000/uploads/test123?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AjAOk2gNRU%2F20210727%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20210727T182833Z&X-Amz-Expires=3600&X-Amz-Signature=3e7407384dd87e2715d3daa2c58e53e1bfb619ec0b495009558fbe3094add5ef&X-Amz-SignedHeaders=host&x-id=PutObject
I swap minio:9000 to localhost but set the Host to minio then make the request via curl like so:
curl -H "Host: minio:9000" -X PUT "$URL" --upload-file ~/Desktop/hello.txt -v
Its giving me this error:
The request signature we calculated does not match the signature you provided. Check your key and signing method.
* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 9000 (#0)
> PUT /uploads/test123?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AjAOk2gNRU%2F20210727%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20210727T184545Z&X-Amz-Expires=3600&X-Amz-Signature=44058eebea8e31afb60a5993f9d26b644c40bebda24004b63225a51d227e7723&X-Amz-SignedHeaders=host&x-id=PutObject HTTP/1.1
> Host: minio:9000
> User-Agent: curl/7.64.1
> Accept: */*
> Content-Length: 252
> Expect: 100-continue
>
< HTTP/1.1 403 Forbidden
< Accept-Ranges: bytes
< Content-Length: 399
< Content-Security-Policy: block-all-mixed-content
< Content-Type: application/xml
< Server: MinIO
< Vary: Origin
< X-Amz-Request-Id: 1695BA2F941F436A
< X-Xss-Protection: 1; mode=block
< Date: Tue, 27 Jul 2021 18:45:53 GMT
< Connection: close
<
<?xml version="1.0" encoding="UTF-8"?>
* Closing connection 0
<Error><Code>SignatureDoesNotMatch</Code><Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message><Key>test123</Key><BucketName>uploads</BucketName><Resource>/uploads/test123</Resource><RequestId>1695BA2F941F436A</RequestId><HostId>fb52d19a-7b70-4620-9a52-726ba6fd9df5</HostId></Error>
I've tried sending more or less headers via curl it seems to have no effect. I dont' know why it thinks the signatures don't match either.
the signature is generated using the parameters this.client, command, { expiresIn: 3600 }, this.client includes S3Client(config), config includes endpoint: "http://minio:9000" and you are modifying the endpoint after the signature is generated thereby invalidating the signature, as the error suggests.
Background
I set up an Express.js app behind a proxy to let users to login before being directed to a web app. This app is failing to serve up some images in Safari (macOS/iOS) because Safari is not sending the cookie back with requests for images that originate from the loadImage() method in my p5.js code. This does not happen on Chrome (macOS).
When I load the page, the browser requests the resources fine. But requests originating from my application returns a different session, which is not logged in, and gets caught by Express:
// Request for the main page by the browser
Session {
cookie:
{ path: '/',
_expires: 2020-05-04T16:26:00.291Z,
originalMaxAge: 259199998,
httpOnly: true,
secure: true },
loggedin: true }
// Request for image assets by a script in my application
Session {
cookie:
{ path: '/',
_expires: 2020-05-04T16:26:00.618Z,
originalMaxAge: 259200000,
httpOnly: true,
secure: true } }
HTTP Requests from Safari
GET https://mydomain/app/img/svg/Water.svg HTTP/1.1
Host: mydomain
Origin: https://mydomain
Connection: keep-alive
If-None-Match: W/"5e6-171c689d240"
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
If-Modified-Since: Wed, 29 Apr 2020 15:24:13 GMT
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15
Referer: https://mydomain/app/
Accept-Language: en-us
Accept-Encoding: gzip, deflate, br
HTTP/1.1 302 Found
Date: Fri, 01 May 2020 06:50:07 GMT
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.3.17
X-Powered-By: Express
Location: /
Vary: Accept
Content-Type: text/plain; charset=utf-8
Content-Length: 23
Access-Control-Allow-Origin: *
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Found. Redirecting to /
Express app
The app is set up behind an HTTPS proxy, so I set the Express Session object to trust proxy and set security to auto (setting to false doesn't fix the problem):
app.set('trust proxy', 1)
app.use(session({
secret: 'my-secret',
resave: true,
saveUninitialized: true,
cookie: {
secure: 'auto',
maxAge: 259200000
}
}));
When the user signs in, it is sent to /auth to check against the database
app.post('/auth', function (request, response) {
var user = request.body.user;
var password = request.body.password;
if (user && password) {
connection.query('SELECT * FROM accounts WHERE user = ? AND password = ?', [user, password], function (error, results, fields) {
if (results.length > 0) {
request.session.loggedin = true;
// If the user logs in successfully, then register the subdirectory
app.use("/app", express.static(__dirname + '/private/'));
// Then redirect
response.redirect('/app');
} else {
response.send('Incorrect password!');
}
response.end();
if (error) {
console.log(error);
}
});
} else {
response.send('Please enter Username and Password!');
response.end();
}
});
They are redirected to /app when logged in:
app.all('/app/*', function (request, response, next) {
if (request.session.loggedin) {
next(); // allow the next route to run
} else {
// The request for images from my p5 script fails and these request redirect to "/"
response.redirect("/");
}
})
Question
What can I do to ensure Safari pass the session cookie with its request so that Express will return the correct asset?
Edit
Including the function that invokes loadImage(). This is embedded in an ES6 class that loads image assets for particles in a chemical simulation. This class must successfully resolve promises so other higher order classes can set correct properties.
loadParticleImage() {
return new Promise((resolve, reject) => {
loadImage(this.imageUrl, (result) => {
// Resolves the Promise with the result
resolve(result);
}, (reason) => {
console.log(reason);
});
})
}
Edit #2
Including the headers for a successful request directly to the URL of the image asset:
GET https://mydomain/app/img/svg/Water.svg HTTP/1.1
Host: mydomain
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Cookie: connect.sid=s%3A2frOCv41gcVRf1J4t5LlTcWkdZTdc8NT.8pD5eEHo6JBCHcpgqOgszKraD7AakvPsMK7w2bIHlr4
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15
Accept-Language: en-us
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
I suggest using express's static middleware to serve static files. With this, you won't need any session to get images, js, css, etc. Also, it accelerates your application. You need to place
app.use(express.static( ... ))
before the app.use(session( ... )) statement if you want some additional perfomance, because if you do, express won't attepmt to creare session for static files.
The fetch() call in the source code for that loadImage() function is not setting the credentials option that controls whether cookies are included with the request or not, therefore they are not sent with the request.
Do you really need authentication before serving an image? If not, you could rearrange the way you serve images in your server so that they can be served without authentication using express.static() pointed at a directory that contains only resources that can be served without authentication. If they do need to be authenticated, you may have to patch the loadImage() code to use the credentials: include option or load your images a different way.
I am playing with creating a simple authentication system and have a simple play project at: https://github.com/ericg-vue-questions/authentication
The main technologies I am using are:
FastAPI for the backend server
Vue for the frontend UI
axios to communicate from the frontend to the backend (eventually, a standard OpenAPI client)
I am make the axios call by doing:
axios
.get('http://127.0.0.1:8000/api/login', {
params: {
username: username,
password: password
},
withCredentials: true
})
.then((response) => {
console.log('Logged in')
console.log(response)
})
.catch(err => { console.log(err) })
On the backend, the code that sets the cookie is:
#app.get("/api/login", tags=["api"], operation_id = "login" )
async def login( username: str, password: str, response: Response ):
authenticated = False
if username in users:
if users[ username ][ 'password' ] == password:
authenticated = True
response.set_cookie( key="user", value=str( users[ username ][ 'id' ] ), max_age = 60 * 60 * 24 )
return authenticated
I can confirm that the cookie is being sent and received in the browser, but it is not being stored for some reason. I thought that the only thing that was required was to set withCredentials: true in the axios get request, but that doesn't seem to be working. Any idea what I might be doing wrong?
My Response headers are:
HTTP/1.1 200 OK
date: Sun, 15 Dec 2019 01:54:14 GMT
server: uvicorn
content-length: 4
content-type: application/json
set-cookie: user=userid; Max-Age=86400; Path=/
access-control-allow-credentials: true
access-control-allow-origin: http://localhost:8080
vary: Origin
I'm pretty sure that's because you are not setting a path, for example '/', to your cookie. That's the fourth parameter in set. If you're using your cookie in a https connection, you should also set a domain.
I can't figure out why my GET endpoint gets called but my POST endpoint is not working. When I call curl -v -X GET http://localhost:8080/myresource/test123 it succesfully returns hello
But when I call
curl -v -X POST \
http://localhost:8080/myresource \
-H 'Content-Type: application/json' \
-d '{"test": "testvalue"}'
I keep getting this response:
* Connected to localhost (::1) port 8080 (#0)
> POST /myresource HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> Content-Type: application/json
> Content-Length: 21
>
* upload completely sent off: 21 out of 21 bytes
< HTTP/1.1 500 Request failed.
< Content-Type: text/html;charset=ISO-8859-1
< Connection: close
< Content-Length: 1031
<
* Closing connection 0
<html><head><title>Grizzly 2.4.0</title><style><!--div.header {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#003300;font-size:22px;-moz-border-radius-topleft: 10px;border-top-left-radius: 10px;-moz-border-radius-topright: 10px;border-top-right-radius: 10px;padding-left: 5px}div.body {font-family:Tahoma,Arial,sans-serif;color:black;background-color:#FFFFCC;font-size:16px;padding-top:10px;padding-bottom:10px;padding-left:10px}div.footer {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#666633;font-size:14px;-moz-border-radius-bottomleft: 10px;border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;border-bottom-right-radius: 10px;padding-left: 5px}BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;}B {font-family:Tahoma,Arial,sans-serif;color:black;}A {color : black;}HR {color : #999966;}--></style> </head><body><div class="header">Request failed.</div><div class="body">Request failed.</div><div class="footer">Grizzly 2.4.0</div></body></html>%
Here is my code
import javax.ws.rs.*
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.Response
#Path("myresource")
class HelloWorldResource {
#POST
#Consumes(MediaType.APPLICATION_JSON)
#Produces(MediaType.APPLICATION_JSON)
fun createMessage(testPost: String): Response {
return Response.status(200).entity("helllo post").build()
}
#GET
#Path("{testGet}")
#Produces(MediaType.APPLICATION_JSON)
fun getMessage(#PathParam("testGet") testGet: String): Response {
return Response.status(200).entity("hello").build()
}
}
Without seeing the actual underlying exception, it's hard to say for sure, but likely you're running into similar issues as Jersey: Return a list of strings with mismatches between a String type and a MediaType.APPLICATION_JSON produces/consumes declarations. If you're dealing in raw strings, I'd suggest using MediaType.PLAIN_TEXT, or having your post body and return value be an entity that can be represented as a non-raw-string json object (ie, something enclosed in {}), and making sure a jackson provider is registered with jersey.