Flask+Axios+HTTPS环境下CORS失效：响应Origin为HTTP而非HTTPS

问题现象 #

• Expo Go Web实际运行在http://localhost:19006/，但接收后端响应时被判定为https://localhost:19006/
• iOS版Expo Go调用接口时报错：

LOG [AxiosError: Network Error]

后端（Flask）配置 #

Flask CORS初始化代码：

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['SECRET_KEY'] = os.environ.get("SECRET_KEY", 'xxx')

cors = CORS(app, resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*", "Access-Control-Allow-Origin": "*"}})

接口实现与启动代码：

@app.route("/matches", methods=["GET"])
def getMatches():
    print('request for matches')
    response = matches.getMatches()
    return response


if __name__ == '__main__':
    app.run(ssl_context=('certs/cert.pem', 'certs/key.pem'))

前端（React Native + Expo Go）请求代码 #

export default function App() {

   const axiosApiCall = () => {

    const config = {
      headers:{
        'origin': 'https://localhost:19006' // 此处也尝试过http，无效果
      }
    };

 axios
  .get("https://127.0.0.1:5000/matches", config)
  .then((response) => {
      setState({quote : 'yes'});
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    })
}

测试补充信息 #

• 后端接口在Postman中调用完全正常
• Expo Go Web版能获取到接口返回结果，但触发CORS错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://127.0.0.1:5000/matches. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match https://localhost:19006).

请求与响应头详情：

HTTP/1.1 200 OK
Server: Werkzeug/2.2.2 Python/3.9.16
Date: Thu, 05 Jan 2023 10:16:42 GMT
Content-Type: application/json
Content-Length: 274552
Access-Control-Allow-Origin: http://localhost:19006
Access-Control-Expose-Headers: *
Vary: Origin
Connection: close

GET /matches HTTP/1.1
Host: 127.0.0.1:5000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0
Accept: application/json, text/plain, /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Origin: http://localhost:19006
DNT: 1
Connection: keep-alive
Referer: http://localhost:19006/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-GPC: 1

已尝试的解决方案 #

• 硬编码CORS允许的源，无变化
• 将Axios请求替换为async fetch，无变化
• 添加/修改Axios请求头配置，无变化
• 更换不同浏览器测试，无变化
• 关闭后端SSL，引发React Native其他关联问题

内容的提问来源于stack exchange，提问作者Patrick