跨域请求被阻止:同源策略禁止读取远程资源 [英] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

问题描述

我刚刚开始使用Angular(Angular CLI:9.1.12，Node:12.16.2).我正在学习角度的基础知识.

I have just started working on Angular (Angular CLI: 9.1.12, Node: 12.16.2). I am studying basic of angular.

我有一个本地运行的Django REST API-

I have a Django REST API running locally at -

http://127.0.0.1:8000/view/websyellow/

现在，我想从角度进行常规的邮政服务.服务在GET操作上工作正常，但对于POST却给出了错误-

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 -

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).

我正在使用Mozilla.

I am using Mozilla.

服务代码-

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)
  };
}

组件ts文件-

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 = {"looking_for":"plumber", "place":"south sc" };
    this.scrapSeervice.realpostservice(postdata).subscribe( data =>{
      this.postfuncflag = true;
      this.datalist = data;
      console.log("here we hit mock POST func for scrape service");
      console.log(this.datalist);
    })
  }
}

组件HTML文件-

<p>webscrape works!</p>

<button (click) = "webscrapefunpost()" >Click here for Web Scraping data.</button>

<br>
<br>
<div *ngIf = "postfuncflag" >
    <table class = "table" >
        <th>Id</th>
        <th>Name</th>
        <th>Phone No.</th>
        <th>Website</th>
        <tr *ngFor = "let ele of datalist" >
            <td>{{ ele.id }}</td>
            <td>{{ ele.name }}</td>
            <td>{{ ele.phone }}</td>
            <td>{{ ele.Website }}</td>
        </tr>
    </table>
</div>

但是，如果我使用任何服务器链接，它都可以像任何第三方REST API一样正常工作.

But if I use any server link it works correctly like any third party REST API.

我该如何解决这个问题.

How can I solve this problem.

推荐答案

这是一项安全功能.

您可以使用 Angular代理，或添加 CORS标头.

这篇关于跨域请求被阻止:同源策略禁止读取远程资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！