Wed, 03/02/2022 - 02:08
#1
Plantronics browser integration JS
Hi,
In an Angular9 project, i want to init the plantronics driver for browser. I can see the attached devices on a browser tab open "http://127.0.0.1:32017/Spokes/DeviceServices/Info" or "https://127.0.0.1:32018/Spokes/DeviceServices/Info". But i get CORS error while requesting in the project.
I request the device info as below:
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Accept', '*/*');
xhr.setRequestHeader('Accept-Language', 'en-GB,en-US;q=0.9,en;q=0.8,tr;q=0.7,de;q=0.6');
xhr.send();
This is the error i receive on browser log:
Access to XMLHttpRequest at 'http://127.0.0.1:32017/Spokes/DeviceServices/Info' from origin 'http://localhost:8190' 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.
Have you experience the CORS issue as well?
Thanks
Thu, 03/03/2022 - 01:51
#2
Hi,
I have also noticed a CORS header problem with REST API recently and we are currently investigating.
Internal ref: SWD-4613
Will let you know once we find a solution or alternative integration option.
Thanks,
Lewis.
Thu, 03/03/2022 - 11:54
#3
Hi,
Seems like the cause may be this: https://docs.google.com/document/d/1fdwetZXUz_Q03ZpGwXizq5AE1yn_lMhamUJMwvsHvTU/edit
Apparently our JavaScript API was impacted by these pre-flight checks.
And as such was impacting me too on Chrome 98, and Edge 98.
However, I just updated to Chrome 99 and it's no longer happening. It is also not happening on Chrome 98 arm64 on Mac.
Could you check to see if this is the cause for you?
Thanks,
Lewis.
Fri, 03/04/2022 - 03:03
#4
Hi,
On Intel Mac; chrome version is Version 98.0.4758.109 (Official Build) (x86_64), it shows up to date thus i cannot update it to version 99. On arm64 Mac;chrome version is Version 98.0.4758.102 (Official Build) (arm64), it shows up to date and still shows the CORS error. What is your exact version on arm64? Thanks
Fri, 03/04/2022 - 03:16
#5
arm64 version I got is 98.0.4758.109.
Fri, 03/04/2022 - 03:30
#6
On my intel mac I have Chrome 98.0.4758.80 - and that gives continuous CORS errors in the inspector, and call control with the sample app doesn't work https://pltdev.github.io/Plantronics%20JavaScript%20Sample.html
However, I've just allowed Chrome to update itself via ... > Help > About Google Chrome. It is now on 99.0.4844.51. This version on same sample app doesn't give any CORS errors/warnings, and the headset call control now works with this sample, i.e. ring/incoming call button, then call answer/end with headset Talk button.
Mon, 03/07/2022 - 02:41
#7
Hi, update was available for me today. So i updated the chrome version to Version 99.0.4844.51 on Intel Mac. Still same error occurs.
Access to XMLHttpRequest at 'https://127.0.0.1:32018/Spokes/DeviceServices/Info' from origin 'http://localhost:8190' 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.
Same error occurs with http://127.0.0.1:32017/Spokes/DeviceServices/Info
Mon, 03/07/2022 - 03:19
#8
Hi,
What service is hosting on localhost port 8190?
Could you add to the response headers of that service the
Access-Control-Allow-Origin
With value of *
Which would tell you app that connections to other origins I.e. the Hub REST API are allowed?
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Mon, 03/07/2022 - 03:41
#9
More reading:
https://stackoverflow.com/questions/60287223/cors-issue-when-calling-a-localhost-api-hosted-on-one-port-from-another-port
“It's the HTTP service that ultimately controls access by specifying appropriate headers in the responses it serves, and the user agent validates the cross origin request where it refuses to proceed if the server didn't indicate it allows requests from the different origin the script was served from -- the response will be discarded and an error will be thrown.
In short, you need to add the headers to the responses your REST service at localhost:8501 generates…”
Mon, 03/14/2022 - 01:56
#10
Hi, as you can see in the first message, i already use "xhr.setRequestHeader('Access-Control-Allow-Origin', '*');" in the request. This did not help. Does this line solve the issue on your local system? Or SWD-4613 is still open and being investigated?
Thanks
Mon, 03/14/2022 - 05:04
#11
Hi,
You cannot set that header Access-Control-Allow-Origin * in the request. It needs to be set in the response headers by the http server that server your script, i.e. http://localhost:8190. Regarding the SWD-4613, this is not being investigated as it has now been reported to Google, as follows: https://bugs.chromium.org/p/chromium/issues/detail?id=1302953
Tue, 03/15/2022 - 02:44
#12
Hi, btw i updated the plantronics hub on mac Intel to version 3.24.0. Plantronics hub is open and i have one attached device. Chrome, Safari, Firefox shows nothing except this site cannot be reached or unable to connect. Is there a known issue with the last version? Because also i lost the connection from node.js electron. With the previous version my electron app was listed on plantronics hub softphones list.
Tue, 03/15/2022 - 03:23
#13
Hi again, i removed the updated version and installed Plantronics Hub again. Now electron app is displayed again in the softphones list. And i can see the device info on http://127.0.0.1:32017/Spokes/DeviceServices/Info on Chrome, Safari.
Since the response is sent by http://127.0.0.1:32017/ , it makes sense that the Plantronics Hub adds Access-Control-Allow-Origin', '* to the response. Is that possible?
Tue, 03/15/2022 - 09:12
#14
Hi,
I made a basic electron hello world app, following this: https://www.electronjs.org/docs/latest/tutorial/quick-start
I then added the REST API javascript sample to the app from this code: https://github.com/plantronics/pdc/tree/master/JavaScript%20Sample
The file Plantronics JavaScript Sample.html which I renamed index.html for this demo.
Take a look at this screenshot:
https://developer.plantronics.com/files/electronhelloworldwithhubrestapipng
I didn't get any problems with CORS. Are you using electron in a different way that is causing different behaviour to what I'm seeing?
C:\dev\elechello\my-electron-app>npm -v
8.4.0
C:\dev\elechello\my-electron-app>node -v
v16.13.2
Tue, 03/15/2022 - 09:28
#15
Actually in my case electron is reading index.html, spokes.js etc as local files, rather than serving them from a web server...
Tue, 03/15/2022 - 11:16
#16
update, I've reproduced issue now with an Angular app. I will now look for workaround...
Tue, 03/15/2022 - 11:32
#17
Hi,
I have found 2 web sites that describe how to overcome cors issues with Angular apps. Both involve changing the angular app hosting.
This one: https://www.stackhawk.com/blog/angular-cors-guide-examples-and-how-to-enable-it/
And this one: https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/
Could you try the suggested approaches and let me know?
Thanks,
Lewis
Tue, 03/15/2022 - 12:06
#18
Further update I got it working (angular app able to make http request to Hub REST API) by one of the suggestions of creating a proxy configuration.
Details to follow…
Tue, 03/15/2022 - 12:24
#19
Here is the method I followed to create a proxy config for development.
And here is a screenshot of a successful http response from Hub REST API to my angular app: https://developer.plantronics.com/files/angular-works-hub-rest-api-proxy-configpng
For a production server that is hosting your app, I think you would need to follow the other advice to enable cors on the server side, which would effectively set Access-Control-Allow-Origin *. Note you could also set Access-Control-Allow-Origin for just the specific hosts used by Hub REST API, which would be more secure, e.g. 127.0.0.1:32017 / 127.0.0.1:32018
Wed, 03/16/2022 - 06:56
#20
Can you pls s