Flask CORS 问题 - OPTION 请求未通过

Question

我花了三天时间修复这个 CORS 错误，但没有成功。你能指导我如何解决这个问题吗？

我在具有 docker 容器的同一台本地机器上配置了 Angular（前端）+ Flask（后端 api）。 (Ubuntu 16.04)

Docker#1 ：暴露端口 5000 的烧瓶。 -> 运行和 manage.py --host 0.0.0.0 用于外部访问。

Docker#2 : angular 暴露端口 4200 的应用程序。 -> 运行和 ng serve --port 0.0.0.0 用于外部访问。

curl --user username:password http://127.0.0.1:5000/v1/classes/ 在我的主机和 angular docker 容器中成功。同样在chrome浏览器中导航url即可。

但是当我尝试在 angular 代码中调用 get api 时遇到了 OPTION 的 CORS 错误；

OPTIONS http://127.0.0.1:5000/v1/classes/ 401 (UNAUTHORIZED)
Access to XMLHttpRequest at 'http://127.0.0.1:5000/v1/classes/' 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.

这是我的 angular 服务代码；

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { delay, map, catchError, tap } from 'rxjs/operators';

const endpoint = 'http://127.0.0.1:5000/v1/';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic ' + btoa('username:password')
  })
};

@Injectable()
export class ExampleCRUDService {

  constructor(private http: HttpClient) {}

  private extractData(res: Response) {
    let body = res;
    return body || { };
  }

  getClasses(): Observable<any> {
    return this.http.get(endpoint + 'classes/', httpOptions).pipe(
      map(this.extractData));
  }
}

测试以下是我从烧瓶方面进行的试验，但没有成功。

CORS(app)

@app.route("/")
@cross_origin()

CORS(app, resources={r"/*": {"origins": "*"}})

@app.after_request
def after_request(response):
   response.headers.add('Access-Control-Allow-Origin', '*')
   response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
   response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
   return response

app.config['CORS_HEADERS'] = 'Content-Type'
cors = CORS(app, resources={r"/v1": {"origins": "http://localhost:4200"}})

@app.route('/')
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])

CORS(app, expose_headers='Authorization')

Answer 1

令我惊讶的是，即使您使用以下内容，您仍面临 CORS 问题：

CORS(app)

请尝试以下操作：

CORS(app, origins=['127.0.0.1:4200'])

希望这能解决您的问题。如果您仍然遇到此问题，请告诉我。

Flask CORS 问题 - OPTION 请求未通过

Flask CORS issue - OPTION request is not passed

flask

flask-cors