deploy_feedback icon indicating copy to clipboard operation
deploy_feedback copied to clipboard

[Bug]: Access-Control-Allow-Origin is missing in HTTP header

Open hh54188 opened this issue 1 year ago • 1 comments

Problem description

I build an application with Deno and Hono framework. This is the main code part:

// server.ts
const app = new Hono();

app.use('*', cors({
    origin: '*',
}))

app.get('/api/v1/health', (c: Context) => {
    return c.json({status: 'ok'});
})

export default app;

// index.ts:
import app from './src/server.ts';

Deno.serve({ port: 8787 }, app.fetch)

When I try to access the health API from my another website which use port 8080. I can get resposne successfully. Here is the resposne header

HTTP/1.1 200 OK
access-control-allow-origin: *
content-type: application/json; charset=UTF-8
vary: Accept-Encoding
content-length: 15
date: Wed, 22 May 2024 13:31:20 GMT

However, after I deploy the Deno application on Deno Deploy. The header access-control-allow-origin is missing. Here is the resposne header after deployment:

HTTP/1.1 307 Temporary Redirect
Transfer-Encoding: chunked
Alt-Svc: h3=":443"; ma=86400
Cache-Control: private
Cf-Cache-Status: DYNAMIC
Cf-Ray: 887d3aad1ea19e32-SIN
Connection: keep-alive
Content-Type: text/html; charset=UTF-8
Date: Wed, 22 May 2024 13:42:23 GMT
Keep-Alive: timeout=4
Location: https://xxxxxxxxxxxxxxxxxx:443/api/v1/health
Nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Proxy-Connection: keep-alive
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=dCYK%2Bdsw7TGlGb4EKebZf1Sbm03yfC0qyQyhTDN9%2FckSSKmXFSidki3WmNVinIevWLn905A9ZpL0MphfVBXY6U3L2t%2BdHoVRWTuzzsnUAD3Hf6D0HpBxkqZgvkurblVjSH8ouxiS"}],"group":"cf-nel","max_age":604800}
Server: cloudflare

Which make my backend service cannnot be accessed from the website

Steps to reproduce

  1. Build an service with Deno and Hono:
// server.ts
const app = new Hono();

app.use('*', cors({
    origin: '*',
}))

app.get('/api/v1/health', (c: Context) => {
    return c.json({status: 'ok'});
})

export default app;

// index.ts:
import app from './src/server.ts';

Deno.serve({ port: 8787 }, app.fetch)
  1. Deploy the service to Deno Deployment

  2. Try to access the /api/v1/health from the browser via web page

Expected behavior

The Access-Control-Allow-Origin can be seen in the API response

Environment

My local environment:

deno 1.43.4 (release, x86_64-pc-windows-msvc)
v8 12.4.254.13
typescript 5.4.5

I don't know what's the environment on the Deno Deploy

Possible solution

No response

Additional context

No response

hh54188 avatar May 22 '24 13:05 hh54188

BTW, I try to replace Hono with Oak and it still not working. It works find in local environment. But the header will miss once it been deployed to the Deno Deploy

hh54188 avatar May 23 '24 03:05 hh54188

Deno Deploy won't change access-control-* headers if set. The response looks like it was served by CloudFlare? It looks like CloudFlare is serving you a redirect in this case.

rbetts avatar Jun 06 '24 20:06 rbetts