Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Refused to set unsafe header "Referer" when you use remote debug

See original GitHub issue

Hi,

I’m trying to debug the data that comes back from the module. My issue is that when I try to do so, the console throw this error:

GooglePlacesAutocomplete.js:480 Refused to set unsafe header "Referer"
GooglePlacesAutocomplete._this._request @ GooglePlacesAutocomplete.js:480
GooglePlacesAutocomplete._this._onChangeText @ GooglePlacesAutocomplete.js:493
GooglePlacesAutocomplete._this._handleChangeText @ GooglePlacesAutocomplete.js:502
_onChange @ TextInput.js:784
proxiedMethod @ createPrototypeProxy.js:44
invokeGuardedCallback @ ReactErrorUtils.js:22
invokeGuardedCallback @ ReactErrorUtils.js:110
invokeGuardedCallbackAndCatchFirstError @ ReactErrorUtils.js:133
executeDispatch @ EventPluginUtils.js:89
executeDispatchesInOrder @ EventPluginUtils.js:121
executeDispatchesAndRelease @ EventPluginHub.js:37
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:48
forEachAccumulated @ forEachAccumulated.js:32
processEventQueue @ EventPluginHub.js:232
runEventQueueInBatch @ ReactEventEmitterMixin.js:18
handleTopLevel @ ReactEventEmitterMixin.js:38
(anonymous) @ ReactNativeEventEmitter.js:106
fiberBatchedUpdates @ ReactGenericBatching.js:27
performFiberBatchedUpdates @ ReactGenericBatching.js:33
perform @ Transaction.js:150
batchedUpdates @ ReactDefaultBatchingStrategy.js:61
batchedUpdates @ ReactUpdates.js:92
batchedUpdates @ ReactGenericBatching.js:38
batchedUpdatesWithControlledComponents @ ReactGenericBatching.js:51
_receiveRootNodeIDEvent @ ReactNativeEventEmitter.js:105
receiveEvent @ ReactNativeEventEmitter.js:130
__callFunction @ MessageQueue.js:250
(anonymous) @ MessageQueue.js:101
__guard @ MessageQueue.js:218
callFunctionReturnFlushedQueue @ MessageQueue.js:100
(anonymous) @ debuggerWorker.js:71
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=Pa&key=AIzaSyDAXXXXXXXXXX5Dw&language=en&types=%28cities%29. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

If I disable the remote debugger, the module works fine. Another thing to note: my API Key doesn’t have any restrictions.

How to use this module and debug it properly?

Issue Analytics

State:
Created 6 years ago
Comments:8

Top GitHub Comments

2reactions

guilhermepontescommented, Sep 25, 2017

Hey, sorry for the late response. Looks like you are using the GLOBAL.originalXMLHttpRequest to debug, right? So… it is not going to work because of the CORS issue. And I think there’s no need for a debug prop in the component since this is more for lib maintainers usage.

I’d recommend you to these steps to try to get more info about the request:

Comment the http debug line
Go to your local node_modules
Open the react-native-google-places-autocomplete folder
Open GooglePlacesAutocomplete.js
Log the result of the line 240 or find this line.
Profit. 😃

Let me know if you need help!

0reactions

hthillmancommented, Apr 6, 2020

Any update here? Looks like this uses the server-side library. Right now this is unusable on web… Needs to be replaced with the client library for web implementations.

See this thread: https://github.com/googlemaps/google-maps-services-js/issues/59

Top Results From Across the Web

Refused to get unsafe header - TrackJS

The message describes a failed attempt to access header data from a network request. We discovered this error while working on a prototype...

Ajax request: Refused to set unsafe header - Stack Overflow

It is impossible. The specification requires that the browser abort the setRequestHeader method if you try to set the Referer header (it used...

1629921 - CORS preflight triggered for User-Agent header ...

Now when the bug is triggered I can see that loadInfo->CorsUnsafeHeaders() (at netwerk/protocol/http/nsCORSListenerProxy.cpp:988 ) contains the User-Agent ...

change header referer on xhr - Google Groups

If I try to set referer on xhr I get error Refused to set unsafe header "Referer" var xhr = new XMLHttpRequest(); xhr.open("GET",...

Spring Cloud Gateway

This lets you match on anything from the HTTP request, such as headers or ... Spring Cloud Gateway comes with one non-default remote...