title: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
body: <p>I have just started working on Angular (Angular CLI: 9.1.12, Node: 12.16.2).
  I am studying basic of angular.</p>
  <p>I have a Django REST API running locally at -</p>
  <pre><code>http://127.0.0.1:8000/view/websyellow/
  </code></pre>
  <p>Now I want to make a normal post service from angular. Service is working fine on GET operation, but for POST it is giving an error -</p>
  <p><a href="https://i.stack.imgur.com/ntZTM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ntZTM.png" alt="enter image description here" /></a></p>
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/view/websyellow/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
  
  
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/view/websyellow/. (Reason: CORS request did not succeed).
  </code></pre>
  <p>I am using Mozilla.</p>
  <p>Service code -</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ScrapeService {
  
    constructor( private httpclient : HttpClient ) { }
  
    checkpostservice(postresource){
      return this.httpclient.post('http://127.0.0.1:8000/view/check', postresource)
    };
  
    realpostservice(postresource){
      return this.httpclient.post('http://127.0.0.1:8000/view/websyellow/', postresource)
    };
  }
  </code></pre>
  <p>Component ts file -</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ScrapeService } from '../scrape.eservice';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-webscrape',
    templateUrl: './webscrape.component.html',
    styleUrls: ['./webscrape.component.css']
  })
  export class WebscrapeComponent implements OnInit {
  
    constructor( public scrapeService : ScrapSeervice ) { }
  
    ngOnInit(): void {
    }
  
    postfuncflag = false;
    datalist : any;
  
    webscrapefunpost(){
      const postdata = {&quot;looking_for&quot;:&quot;plumber&quot;, &quot;place&quot;:&quot;south sc&quot; };
      this.scrapSeervice.realpostservice(postdata).subscribe( data =&gt;{
        this.postfuncflag = true;
        this.datalist = data;
        console.log(&quot;here we hit mock POST func for scrape service&quot;);
        console.log(this.datalist);
      })
    }
  }
  </code></pre>
  <p>Component HTML File -</p>
  <pre><code>&lt;p&gt;webscrape works!&lt;/p&gt;
  
  &lt;button (click) = &quot;webscrapefunpost()&quot; &gt;Click here for Web Scraping data.&lt;/button&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;div *ngIf = &quot;postfuncflag&quot; &gt;
      &lt;table class = &quot;table&quot; &gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Phone No.&lt;/th&gt;
          &lt;th&gt;Website&lt;/th&gt;
          &lt;tr *ngFor = &quot;let ele of datalist&quot; &gt;
              &lt;td&gt;{{ ele.id }}&lt;/td&gt;
              &lt;td&gt;{{ ele.name }}&lt;/td&gt;
              &lt;td&gt;{{ ele.phone }}&lt;/td&gt;
              &lt;td&gt;{{ ele.Website }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But if I use any server link it works correctly like any third party REST API.</p>
  <p>How can I solve this problem.</p>