Angular 9 front/corsheaders django 3 back - 将 CORS 标头附加到请求中

Question

在 Angular 9 中找到一种方法来正确配置前端应用程序并使用后端 REST Web 服务时遇到了问题。在具有静态 IP 的远程服务器上，我运行我的 Angular 开发服务器（我知道它仅用于开发目的，但我想先摆脱这个错误）

ng serve --host 0.0.0.0 --port 80

所以我可以从外面访问它。然后我的 django 应用程序也在开发服务器上

127.0.0.1:8000

在 angular service.ts 文件中我尝试注入标头

export class FlightService {

  httpOptions = { 
    headers: new HttpHeaders({
      'Access-Control-Request-Method':'GET',
      'Access-Control-Request-Headers':'origin, x-requested-with, accept'
    })
  };

  private endpoint = 'http://127.0.0.1:8000/services';

  constructor(private http: HttpClient) { }
  //GET All Services
  getAllServices(): Observable<any>{
    return this.http.get(this.endpoint, this.httpOptions)
  }
}

在我的 django 后端的 settings.py 中，我将 corsheaders 模块放在了顶部：

'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...

并允许所有主机（在尝试了许多使用白名单但均无效的事情之后：

CORS_ALLOW_CREDENTIALS = False 

CORS_ALLOW_METHODS = [
 #   'DELETE',
    'GET',
    'OPTIONS'
    #'PATCH',
    #'POST',
    #'PUT',
]


CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'x-forwarded-for'
]

但我总是失败。添加 httpOptions 后，我在浏览器中收到错误：

http.js:2403 拒绝设置不安全的标头“Access-Control-Request-Method”

还有：

拒绝设置不安全的标头“Access-Control-Request-Headers”

所以至少我知道 Angular 正在尝试附加它。

请帮忙，如何处理呢？我想问题出在客户端。我还尝试使用 Angular dev 的代理设置 Nginx，但也未能在 Nginx 配置上附加标头。

Answer 1

这些CORS头不是你设置的，如果浏览器检测到你正在尝试访问跨域资源，它会自动设置。