为何npm start触发CORS错误，HOST=127.0.0.1启动却正常？

我正在开发一个基于Flask后端与React前端的简易应用。直接执行npm start启动React应用时会遭遇CORS错误，但使用HOST=127.0.0.1 npm start启动时，应用可正常运行且无CORS问题。

Flask后端代码片段 #

#!/usr/bin/env python3

from flask import Flask
from flask_cors import CORS
from os import environ

try:
    origins = environ["ORIGINS"]
except KeyError:
    kwargs = {}
else:
    if "," in origins:
        origins = origins.split(",")
    kwargs = dict(resources={r"/*": dict(origins=origins)})

print(kwargs)

app = Flask(__name__)
CORS(app, **kwargs)


@app.route("/")
def index():
    return "reached\n"


if __name__ == "__main__":
    app.run(port=5000)

React前端代码片段 #

import React, { useEffect, useState } from 'react';

const localhost = window.location.hostname

function App() {
  const [response, setResponse] = useState('');

  useEffect(() => {
    document.title = localhost
    fetch(`http://${localhost}:5000/`)
      .then((response) => {
        if (!response.ok) {
          throw Error('Network response was not ok');
        }
        return response.text();
      })
      .then((data) => setResponse(data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      <h2>"reached" expected:</h2>
      <p>{response}</p>
    </div>
  );
}

export default App;

问题解析 #

核心原因是浏览器对localhost和127.0.0.1的CORS策略处理存在差异，结合代码细节拆解如下：

• 直接运行npm start时，React开发服务器默认绑定localhost（域名形式），此时前端页面URL为http://localhost:3000，fetch请求目标是http://localhost:5000。由于你的Flask后端未设置ORIGINS环境变量，flask-cors默认配置不会主动允许localhost域名的跨域请求，且浏览器对localhost这类本地域名的CORS校验更严格，最终触发CORS错误。

• 用HOST=127.0.0.1 npm start启动时，React绑定的是IP地址127.0.0.1，前端页面URL变为http://127.0.0.1:3000，fetch请求目标是http://127.0.0.1:5000。此时：

  1. flask-cors的默认配置对IP地址的跨域请求限制更宽松，会允许同IP的跨域访问；
  2. 浏览器对明确的IP地址不会进行域名类的额外安全校验，CORS请求能顺利通过后端校验。

另外你的React代码用window.location.hostname动态拼接请求URL，确保了请求地址和前端地址的主机部分一致，这也是指定HOST后能正常工作的前提。

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