Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CORS issue when connecting to DevTunnel #296

Closed
mb236 opened this issue Aug 24, 2023 · 4 comments
Closed

CORS issue when connecting to DevTunnel #296

mb236 opened this issue Aug 24, 2023 · 4 comments
Assignees
@klvnraju
Labels
question Further information is requested

Comments

@mb236
Copy link

mb236 commented Aug 24, 2023

I currently have a scenario where I'm running into an issue with CORS when I try to connect from one dev tunnel to another.
In my scenario I'm hosting an Angular application on devtunnel1.devtunnels.ms and my ASP.NET Core backend on devtunnel2.devtunnels.ms. I would like to communicate my Angular application (hosted on devtunnel1) to communicate with my backend hosted on devtunnel2.

Since the HTTP requests are performed by the browser, CORS is checked an I'm receiving an error of the following kind:

Access to XMLHttpRequest at 'https://devtunnel1.devtunnels.ms' from origin 'https://devtunnel2.devtunnels.ms' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I should mention that the request itself is routed successfully to my backend on devtunnel2, since the response code is a 200 and I also see the request coming through. The response is blocked from the browser due to the mentioned CORS error.

Did I configure something wrong or is this scenario not supported yet?
@Plevi1337
Copy link

Were you able to solve this somehow? I'm running into the same issue.

@klvnraju klvnraju self-assigned this Sep 12, 2023
@klvnraju
Copy link
Collaborator

klvnraju commented Sep 13, 2023 •
edited

Did you add access-control-allow-origin header for your server?

I am trying to repro this issue with this sample code and things seems to be working as expected.

Below is the nodejs server code which adds CORS header. (Update the origin to the client tunnel address and make sure this is anonymous tunnel)

const express = require('express');
const cors = require('cors');
const app = express();

const ingredients = [
    {
        "id": "1",
        "item": "Bacon"
    }
];

// Update this with client tunnel url. Change it to '*' if you want to allow all
app.use(cors({
    origin: 'https://qjrvmwhh-5070.usw2.devtunnels.ms'
}));

app.get('/ingredients', (req, res) =>{
    res.send(ingredients);
});
app.listen(6069);

And below is a simple client index.html to call this api. (Update the server tunnel url)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <script type="text/javascript">
            fetch("https://qp1bckqj-6069.usw2.devtunnels.ms/ingredients").then(req => req.text()).then(console.log)
        </script>
    </head>
    <body>
        <div class="container">
            <h1>Home</h1>
        </div>
    </body>
</html>

And note the access-control-allow-origin header that server responds with.
image

@curib curib added the question Further information is requested label Sep 19, 2023
@mb236
Copy link
Author

mb236 commented Sep 21, 2023 •
edited

Hi @klvnraju,
I double checked and it seems that was really an issue with the CORS settings on my ASP.NET Core service.

In my case I tried to use wildcard subdomains (e.g. "https://*.devtunnels.ms") and there are two things that I was missing:

  • You need to explicitly call SetIsOriginAllowedToAllowWildcardSubdomains() to allow for the use of wildcard subdomains
  • At the time of writing wildcard subdomains cannot contain a wildcard port. So a wildcard like this: https://*.devtunnels.ms:* (to allow for a random port) will resume in an error. In my case I just provided the port that I wanted to the wildcard e.g. https://*.devtunnels.ms:4200 and than it started working.

This issue can be closed from my end as it is not an issue related to Dev Tunnels. It just something to keep in mind while one is setting up CORS configuration 😄

@klvnraju
Copy link
Collaborator

Glad to hear that. Closing the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@klvnraju klvnraju

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mb236 @curib @klvnraju @Plevi1337