[英]Angular&Django: No 'Access-Control-Allow-Origin' header is present on the requested resource
I'm learning how to develop a website using Angular and Django. I got this error from my Angular localhost:我正在学习如何使用 Angular 和 Django 开发网站。我从 Angular 本地主机收到此错误:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/user/' from origin
'http://localhost:4200' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
In django's settings.py I have installed a custom users app, rest_framework and corsheaders app Besides that, I have included this config:在 django 的 settings.py 中,我安装了一个自定义用户应用程序、 rest_framework和corsheaders应用程序除此之外,我还包含了这个配置:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
I've stacked the middleware in this way:我以这种方式堆叠了中间件:
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', #CORS middleware
'users.middleware.AuthenticationMiddleware', #custom middleware for jwt
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
I've got no CORS errors with login and register requests from my angular app but the problem appeared when I used a middleware to check if a jwt header had been supplied (and test if it was valid or if it had expired).我的 angular 应用程序的登录和注册请求没有 CORS 错误,但是当我使用中间件检查是否提供了 jwt header(并测试它是否有效或是否已过期)时,问题出现了。 I added that middleware to settings.py file and that request worked fine in Postman so I tried to implement it from Angular.我将该中间件添加到 settings.py 文件,该请求在 Postman 中运行良好,因此我尝试从 Angular 实现它。
This is the method:这是方法:
validateToken(): Observable<boolean> {
const url = `${this.baseUrl}/user/`;
const headers = new HttpHeaders().set(
'jwt',
localStorage.getItem('token') || ''
);
return this.http
.get<AuthResponse>(url, {
headers,
})
.pipe(
map((resp) => {
localStorage.setItem('token', resp.jwt);
this._user = resp.user;
return resp.ok;
}),
catchError((err) => of(false))
);
However, I'm getting the error I showed before.但是,我收到了之前显示的错误。 Have any of you gone through this same problem with Angular and Django before and know how it could be solved?你们中有没有人以前遇到过与 Angular 和 Django 相同的问题并且知道如何解决?
PS: I've tried to install 'Allow CORS: Access-Control-Allow-Origin' Chrome extension but when I used it I still got this error: PS:我尝试安装“允许 CORS:Access-Control-Allow-Origin”Chrome 扩展程序,但是当我使用它时仍然出现此错误:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/user/' from origin 'http://localhost:4200'
has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
It does not have HTTP ok status.
There you have a screenshot of preflight request and response from browser's.network tab:那里有来自浏览器的.network 选项卡的预检请求和响应的屏幕截图:
On your headers variable you need to set a pair of property:value containing the missing access control property:在您的标头变量上,您需要设置一对 property:value 包含缺少的访问控制属性:
'Access-Control-Allow-Origin' : '*'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.