[問題] Angular5 POST 檔案至 Flask 後端

General
1

各位Web developer的先進們好！
想請問各位關於angular5 post file到後端flask時(cross domain)，
前後端log都顯示錯誤代號400(bad request)，
後端沒有收到POST的檔案，
就連使用jQuery也一樣；
應該是瀏覽器的某項security policy造成，
我再與前端同環境下的postman向後端POST檔案時，
後端就能確實收到POST的檔案，
不知道是否遺漏掉某部份的設定，還麻煩各位先進們指點。
謝謝！

以下是我前後端的部份程式碼：

Flask (python):

from flask import request                                                                                                                                                                      
from flask import Flask                                                                                                                                                                        
from flask_cors import *                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
app = Flask(__name__)                                                                                                                                                                          
CORS(app, supports_credentials=True)                                                                                                                                                           
                                                                                                                                                                                               
@app.route('/api', methods=['POST'])                                                                                                                                              
def getPost():                                                                                                                                                                                                                                                                                                                                       
    if request.method == 'POST':                                                                                                                                                               
        req_file = request.files['file']                                                                                                                                                       
        print(request.files['file'])                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
        return 'received'

Angular5 (HttpClient):

var form = new FormData();
form.append("file", "/path/to/file");
const req = this
.http.post('http://flaskapiserver.url/api', form, {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
})
.subscribe(
  res => {
    console.log(res);
  }
);

jQuery (透過postman產生):

var form = new FormData();
form.append("file", "/path/to/file");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://flaskapiserver.url/api",
  "method": "POST",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    "Cache-Control": "no-cache"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});
2

瀏覽器這邊，有任何錯誤訊息可以參考嗎?

3

Kevin你好，
瀏覽器這邊只有顯示Bad request 400的錯誤訊息，沒有其他的了！
謝謝！

4

應該不需要設定 headers,
將第三個參數拿掉試試看

5

Kevin你好，
謝謝你的回覆，我將headers拿掉後也還是顯示Bad request,
我再透過angular, jquery, xhr的方式post資料時,
flask上只能接到request.form但沒有request.files,
所以當我再後端call request.files時就會顯示Bad request.

6

對於 flask 不熟，無法協助。
前端的寫法我看起來並沒有什麼有問題

7

謝謝Kevin協助！那應該就是flask的問題了，我再去往那個方向試試！

8

enctype = “multipart/form-data”