CODEWITHSUNDEEP
visual-studio-codecorsgoogle-chrome-devtoolsfirefox-developer-tools
wanna_coder101
wanna_coder101

Reputation: 206

Firefox/Chrome devtools mode causes CORS errors with VSCode Debugging

Launching Chrome/Firefox from VSCode Debugger (runs in DevTools mode) always gives CORS error for API request, but works fine in normal Firefox/Chrome browser.

Using Laravel for API with CORS enabled. Nextjs (React) for frontend, my api request https://site.test/api/info from the frontend https://localhost:3000/home works fine when using Firefox/Chrome normally.

However, as soon as I use the VSCode Debugger (with Firefox Debugger extension installed), it would give a CORS error in the console.

launch.json (For VS Code Debugger)

  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "Launch Firefox against localhost",
      "url": "https://localhost:3000/home",
      "webRoot": "${workspaceFolder}",
      "pathMappings": [
        {
          "url": "webpack://_n_e",
          "path": "${workspaceFolder}"
        }
      ]
    }
  ]
}

Firefox DevTools mode CORS error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://site.test/api/info. (Reason: CORS request did not succeed). Status code: (null)

Does anyone know how to fix this? Not being able to access the debugger and breakpoints ain't fun.

Upvotes: 2

Views: 3432

Answers (1)

user1544428
user1544428

Reputation: 150

OK, I got it working and it took two things.

  1. Open up the url of the backend when vscode opens Firefox to debug something. For example, my api is running here: https://localhost:7188/api/. I opened up https://localhost:7188/swagger/index.html.

If the certificate is self-signed and it gives security warnings, allow it and continue.

  1. For some reason, when you are debugging from VSCode, it isn't seeing the request as coming from what the URL says in your browser.

On the webApi server, I had it set to allow https://localhost:8080/. This works from a normal browser, but fails when Firefox is under "remote control".

I had to change my CORS policy from allowing https://localhost:8080/ to allowing any origin. It then went right to work.

options.AddPolicy(name: "MyPolicy",
            policy =>
            {
                policy.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
                //.WithMethods("PUT", "DELETE", "GET");
            });

The only issue remaining is that it seems that I have to accept the self-signed certificate every time I start debugging from VSCode. I hope I don't have to accept it every time for the api side, as well.

Not sure, but there could be a way to import the certificates into Firefox so that it remembers them while under "remote control".

There is a way to do that in Chrome, but I tried it and it didn't work for my certificate.

Upvotes: 1

Related Questions