连接本地 django 后端 angular 7

Question

我在 Django 后端公开了 API。我想从 Angular 7 获得 API 请求。所以我实现了

的代码

this.HttpClient.get('Http://127.0.0.1:8000/myapp/posts') .subscribe( (data:any[]) => { console.log(data) } )

但我收到一个错误

Access to XMLHttpRequest at 'http://127.0.0.1:8000/myapp/posts' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}message: "Http failure response for (unknown url): 0 Unknown Error"name: "HttpErrorResponse"ok: falsestatus: 0statusText: "Unknown Error"url: null__proto__: HttpResponseBase

任何人都可以提出解决此错误的任何解决方案吗？

Answer 1

从您的 front-end 应用程序发送 HTTP 请求时，使用浏览器的 fetch API、Axios 客户端或 jQuery $.ajax() 方法（a JavaScript XHR 接口的包装器），对于使用 Django REST 框架构建的 back-end API，Web 浏览器将抛出与同源策略相关的错误。

跨源资源共享或 CORS 允许客户端应用程序与托管在不同域上的 API 交互，方法是让现代 Web 浏览器绕过默认执行的同源策略。

在此处参考操作方法：https://www.techiediaries.com/django-cors/

你需要添加一个中间件文件app/cors.py:

class CorsMiddleware(object):
    def process_response(self, req, resp):
        response["Access-Control-Allow-Origin"] = "*"
        return response

这将为每个 Django 请求添加一个 Access-Control-Allow-Origin:* header 但在此之前，您需要将其添加到中间件列表类:

MIDDLEWARE_CLASSES = (
    #...
    'app.CorsMiddleware' 
)

然后安装django-cors-headers

首先使用 pip 安装 django-cors-headers

pip 安装django-cors-headers

连接本地 django 后端 angular 7

Connect local django backend with angular 7

django

angular-services

angular

angular7