The quickest way to do this is to filter on `-method:OPTIONS`.   

[![enter image description here][1]][1]

Explanation: all pre-flight requests are via the HTTP OPTIONS method (opposed to POST or GET). This filter says &quot;not method OPTIONS&quot;.

Note the leading hyphen because if you forget it, you&#39;ll _only_ show pre-flight requests.

  [1]: http://i.stack.imgur.com/9Zp8z.png

By default &quot;All&quot; requests will be displayed in network tab. To see OPTIONS requests, you can select &quot;Other&quot;. To see only your web api requests, you can select &quot;XHR&quot; (which wont show OPTIONS request).

[![enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/D0QKR.png


I&#39;m trying to create a simple html page (I&#39;d later like to add an autocomplete input there) that include google-places-api.
I have an api-key (which is enabled) but I still get an error message.

Here is my html-

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.googleapis.com/maps/api/js?key=MY_KEY&amp;libraries=places&quot;&gt;&lt;/script&gt;
        &lt;title&gt;test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;

but I get this error message-
[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/n1gJw.png


and in the console I get - **Google Maps API error: Google Maps API error: ApiNotActivatedMapError**

I can&#39;t understand what the problem is.. Appreciate anybody&#39;s help

ApiNotActivatedMapError for simple html page using google-places-api

I am a javascript/redux/react beginner building an small application with redux, react-redux, &amp; react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError indicating that dispatch is not a function when I try to execute the resulting prop. When I call dispatch as a prop however (see the setAddr function in the provided code) it works. 

   I&#39;m curious as to why this is, in the example TODO app in the redux docs the mapDispatchToProps method is setup the same way. When I console.log(dispatch) inside the function it says dispatch is type object. I could continue to use dispatch this way but I would feel better knowing why this is happening before I continue any further with redux. I am using webpack with babel-loaders to compile.

My Code:


    import React, { PropTypes, Component } from &#39;react&#39;;
    import { connect } from &#39;react-redux&#39;;
    import { setAddresses } from &#39;../actions.js&#39;;
    import GeoCode from &#39;./geoCode.js&#39;;
    import FlatButton from &#39;material-ui/lib/flat-button&#39;;

    const Start = React.createClass({
	    propTypes: {
		    onSubmit: PropTypes.func.isRequired
	    },

	    setAddr: function(){
		    this.props.dispatch(
			    setAddresses({
				    pickup: this.refs.pickup.state.address,
				    dropoff: this.refs.dropoff.state.address
			    })
		    )   

	    },

	    render: function() {
		    return (
		   	    &lt;div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;pickup&#39; /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;dropoff&#39; /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Does Not Work&#39;
							    onClick={this.props.onSubmit({
                                    pickup: this.refs.pickup.state.address,
				                    dropoff: this.refs.dropoff.state.address
                                })} 
							    /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Works&#39;
							    onClick={this.setAddr} 
							    /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
			    &lt;/div&gt;
		    );
	    }
    })

    const mapDispatchToProps = (dispatch) =&gt; {
	    return {
		    onSubmit: (data) =&gt; {
			    dispatch(setAddresses(data))
		    }
	    }
    }

    const StartContainer = connect(mapDispatchToProps)(Start)

    export default StartContainer
    
Cheers.

&#39;dispatch&#39; is not a function when argument to mapToDispatchToProps() in Redux

Normally both calls are shown, the pre-flight and the actual request. This is sometimes annoying. Is there a way to hide the pre-flights requests ?

Or is there a plugin to filter certain requests based on headers ?

How to filter (hide) Pre-flight requests on my Dev Tools Network

<p>Normally both calls are shown, the pre-flight and the actual request. This is sometimes annoying. Is there a way to hide the pre-flights requests ?</p>
<p>Or is there a plugin to filter certain requests based on headers ?</p>


I&#39;m getting this error using ngResource to call a REST API on Amazon Web Services:

&gt; XMLHttpRequest cannot load
&gt; http://server.apiurl.com:8000/s/login?login=facebook. Response to
&gt; preflight request doesn&#39;t pass access control check: No
&gt; &#39;Access-Control-Allow-Origin&#39; header is present on the requested
&gt; resource. Origin &#39;http://localhost&#39; is therefore not allowed access.
&gt; *Error 405*


Service:

    socialMarkt.factory(&#39;loginService&#39;, [&#39;$resource&#39;, function ($resource) {
        var apiAddress = &quot;http://server.apiurl.com:8000/s/login/&quot;;
        return $resource(apiAddress, {
            login: &quot;facebook&quot;,
            access_token: &quot;@access_token&quot;,
            facebook_id: &quot;@facebook_id&quot;
        }, {
            getUser: {
                method: &#39;POST&#39;
            }
        });
    }]);

Controller:

    [...]
    loginService.getUser(JSON.stringify(fbObj)),
        function (data) {
            console.log(data);
        },
        function (result) {
            console.error(&#39;Error&#39;, result.status);
        }
    [...]

I&#39;m using Chrome, and I dont know what else to do in order to fix this problem. I&#39;ve even configured the server to accept headers from origin `localhost`.

Response to preflight request doesn&#39;t pass access control check

How can I enable CORS on my Django REST Framework?
the [reference][1] doesn&#39;t help much, it says that I can do by a middleware, but how can I do that?


  [1]: http://www.django-rest-framework.org/topics/ajax-csrf-cors/

How can I enable CORS on Django REST Framework

For this project, I&#39;m just learning and practicing Angular 2. I have no server-side and am making API requests to 
[barchart ondemand api][1] .

I&#39;m wondering if it is possible to bypass the cors issue. I&#39;m still fairly new to all this, so baby-step instructions are really appreciated! I&#39;m using `http://localhost:8080`.

Error message: (api key commented out) 

`XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;symbol=GOOG&amp;type=daily&amp;startDate=20150311000000. Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:8080&#39; is therefore not allowed access.`



StockInformationService:

    import {Injectable} from &#39;angular2/core&#39;;
    import {Http, Headers} from &#39;angular2/http&#39;;
    import {Observable} from &#39;rxjs/Rx&#39;;
    
    @Injectable()
    export class StockInformationService {
        private apiRoot = &quot;http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;&quot;;
    
        constructor (private _http: Http) {}
    
        getData(symbol: string): Observable&lt;any&gt; {
            // Tried adding headers with no luck
            const headers = new Headers();
            headers.append(&#39;Access-Control-Allow-Headers&#39;, &#39;Content-Type&#39;);
            headers.append(&#39;Access-Control-Allow-Methods&#39;, &#39;GET&#39;);
            headers.append(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);
    
            return this._http.get(this.apiRoot + &quot;symbol=&quot; + symbol + &quot;&amp;type=daily&amp;startDate=20150311000000&quot;, {headers: headers})
                .map(response =&gt; response.json());
        }
    }


App Component:

    import {Component} from &quot;angular2/core&quot;;
    import {VolumeComponent} from &#39;../../components/volume/volume&#39;;
    import {StockInformationService} from &#39;../../core/stock-information.service&#39;;
    
    @Component({
        selector: &#39;app-shell&#39;,
        template: require(&#39;./app-shell.html&#39;),
        directives: [VolumeComponent],
        providers: [StockInformationService]
    })
    export class AppShell {
        constructor(private _stockInformationService: StockInformationService) {}

        // In my template, on button click, make api request
        requestData(symbol: string) {
            this._stockInformationService.getData(symbol)
                .subscribe(
                    data =&gt; {
                        console.log(data)
                    },
                    error =&gt; console.log(&quot;Error: &quot; + error)
                )}
        }
    
    }


In my console, the requestData Error:
`Error: [object Object]`


  [1]: http://www.barchartondemand.com/api.php

No &#39;Access-Control-Allow-Origin&#39; header in Angular 2 app

This subject has been asked a couple of time, but I still don&#39;t understand something:

When I read answers about 

&gt; No &#39;Access-Control-Allow-Origin&#39; header

issue, it says a setting should be set on the requested server in order to allow cross domain: `add_header &#39;Access-Control-Allow-Origin&#39; &#39;*&#39;;`.

But, please tell me why when asking from **postman** (which is a client), It&#39;s working like a charm and I have a response from the requested server?

Thank you


CORS with POSTMAN

I tried to `fetch` the URL of an old website, and an error happened:

    Fetch API cannot load http://xyz.
    No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.
    Origin &#39;http://abc&#39; is therefore not allowed access.
    If an opaque response serves your needs, set the request&#39;s mode to &#39;no-cors&#39;
    to fetch the resource with CORS disabled.

I understood the message, and tried to do a request that returns an opaque response:

    fetch(&quot;http://xyz&quot;, {&#39;mode&#39;: &#39;no-cors&#39;})

Ok, it now works... but I can&#39;t read it. =\

What&#39;s the purpose then, of an opaque response?

What is an opaque response, and what purpose does it serve?

Recently I reinstalled my PC. When finished reinstalling everything I noticed upon using Inspect that the screen height and width of the page does not show on the top right corner anymore. 

Did they remove it or is there a secret setting I haven&#39;t found yet? or maybe a bug? This made my life so much easier when I had to make a site responsive.

Chrome does not show width and height of screen when inspecting the page with Inspect

chrome dev tools - displays some http header with a leading `:` (not sure why it does with some and not others).  

One of these is the http header `authority` which is displays as:

`authority:api.somedomain.com`

However this is listed in the list of http headers on Wikipedia. Is this a new HTTP2 header or is possible to define any new request field in the headers -or are these fixed?

authority http header - in chrome dev tools

I used to be able to uncheck a checkbox that said `Emulate touch screen` in the `Emulation/Sensors`-panel so that I could see a mouse pointer when using responsive mode. This panel is now gone, and the new sensors-panel doesn&#39;t have this setting.

This makes it impossible to use the responsive mode, as I have no pointer and no control where I touch/click (who designed this feature?!). How can I see a pointer/mouse when I use responsive mode in newer Chrome?

How to show mouse pointer in responsive mode?

Sinсe Google Chrome was updated to 50.x version, it become impossible to work with DevTools. This issue reproduced mostly in &quot;Network&quot; tab. Every time when you click on &quot;request&quot; it takes about 30-40 sec. after that chrome can crash. Tried to delete all extensions, clear cache, and reinstall, but didn&#39;t help. Does anybody know how to fix this issue?

I&#39;m running Chrome 50.0.2661.87 m

UPD: The problem may be occurs because of long headers. Try to close response and request headers.

Google Chrome developer tools works very slow

In Google Chrome&#39;s developer tools, when I select an element, I see     `==$0` next to the selected element. What does that mean?

[![Screenshot][1]][1]

  [1]: http://i.stack.imgur.com/C2eGI.jpg


Content Type	Original Author	Original Content on Stackoverflow
Question	John Smith	View Question on Stackoverflow
Solution 1 - Cors	Rick Hanlon II	View Answer on Stackoverflow
Solution 2 - Cors	Chirag	View Answer on Stackoverflow

How to filter (hide) Pre-flight requests on my Dev Tools Network

Cors Problem Overview

Cors Solutions

Solution 1 - Cors

Solution 2 - Cors

'dispatch' is not a function when argument to mapToDispatchToProps() in Redux

ApiNotActivatedMapError for simple html page using google-places-api

Attributions