Debug profile CORS issue with Chrome 76

I've just run into an issue this morning, which I think is due to Chrome updating itself

I'm debugging a VueJS application, which was working fine last night.

When I run the application, and open localhost from a standard browser window the application works absolutely as expected.

However, when I try and run a JavaScript debugger from WebStorm I get a slew of CORS errors.

9
16 comments
Avatar
Permanently deleted user

the same to me

0

Debugging Vue.js in Chrome 76.0.3809.100 works fine for me, no CORS issues. What server is your app hosted on, what errors can you see namely?

0

See also https://support.google.com/chrome/thread/11089651?hl=en:

Cross-Origin Resource Sharing (CORS) is subject of change in Chrome version 76. New headers are introduced as part of security and those must handled in the code. Later the CORS requests of extensions must be handled in background pages rather then content scripts.
Read all about the recommended actions (for developers) and further restrictions on this page of Google:
 
For updates you can follow this bug report:
For information about Cordova specifically, follow the updates here:
1

Thanks for the updates.

Both are localhost.

I am testing VueJS against out current backend and have an unlocked version which allows CORS. The backend server is NodeJS/Hapi.

The front-end application is VueJS running the standard VueJS `npm serve` script.

As I said above I can access the front-end through a "normal" Chrome window. It's getting Webstorm to hook into the debugger through a standard Webstorm JavaScript Debug Configuration.

Is there anything on there that we can do? Or do we wait for a Webstorm update?

0

>Is there anything on there that we can do? Or do we wait for a Webstorm update?

Updating WebStorm will unlikely help, as I'm not aware of any issues in it that might cause the problem.

So, once more: what errors can you see namely? Does enabling Allow unsigned requests option in Settings | Build, Execution, Deployment | Debugger make any difference?

7

Thank you.

Error is 

"Access to XMLHttpRequest at 'https://<machinename>api/v2/jobs' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

So I may be able to change the Vue server to post on "<machinename>"

Unsigned requests does fix the problem

1

Unsigned requests fixes it for me as well

1

Unsigned requests fixed it here too.

Browsing to localhost when not in Debug works fine on its own. I don't like the idea of having to check that box. It's actually causing things to work differently to a normal browsing experience. Things might end up getting allowed, that we really don't want to be, but might not be aware of it until later testing outside of the development environment.

1

When debugging, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if "Allow unsigned connections" is enabled, so, if you are facing issues because of this header, you have to turn this option on.

 

2
Avatar
Permanently deleted user

Allow unsigned requerst(webstorm settings > Build, Execution, Deployment > Debugger > Build-in server > option) does fix it.

But I think it's not good way to solve the problem like Nick Taylor.

And following errors still have occured!

 

GET https://localhost:8080/sockjs-node/info?t=1566019099198 net::ERR_CERT_AUTHORITY_INVALID

GET https://localhost:8080/sockjs-node/info?t=1566019099198 net::ERR_CERT_AUTHORITY_INVALID

GET https://localhost:8080/sockjs-node/info?t=1566019099198 net::ERR_CERT_AUTHORITY_INVALID

GET https://localhost:8080/sockjs-node/info?t=1566019099198 net::ERR_CERT_AUTHORITY_INVALID

...

0

This started happening to me two days ago. Only when debugging. Any ideas?

edit: this is in PHPStorm 2020.1.1 and Chrome Version 83.0.4103.61. CORS headers ARE present on the requested resource and it works fine when not being attached to debugger. No OPTIONS request sent.

edit2: Allow unsigned request does not fix it.

0

>Allow unsigned request does not fix it

that's strange, this option does normally help if the issue is indeed specific to debugging. When debugging on the built-in web server, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if "Allow unsigned connections" is enabled, so, if you are facing issues because of this header, turning this option on is enough to get rid of CORS problems

0

Ah, I am not debugging on the built-in web server. The option makes no difference, but the issue is related to debugging, because it only happens when debugging localhost:3000.

0

No additional headers are sent then, the results shouldn't be specific to debugging

 

0

could you share a sample project the issue can be repeated with?

0

It only happens when launching chrome in a debug configuration from a phpstorm, it's fine both in incognito and regular chrome when not attached to phpstorm debugger. For now I've disabled security in chrome using some argument when launching it (not by the computer right now).

I can try to create a project later, since this currently is part of a fairly large react application.

0

Please sign in to leave a comment.