解决Flutter APP访问Django后台API跨域问题

目前的项目使用Django+REST_API开放了几个接口，在8000上。使用前端FlutterAPP访问本地8000接口会因为跨域问题而被拦截请求，本质上虽然都是在同一个主机地址，但是由于不是同一个端口导致后台认为发生了跨域.

安装依赖

在你的环境下执行下面指令来安装需要的依赖

pip install django-cors-headers

之后在你的django设置中将刚才安装的依赖添加上

# ../settings.py
INSTALLED_APPS = [
    # ... 你的其他 apps ...
    'corsheaders',  # 必须添加
    # ... 你的其他 apps ...
]

添加中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 确保放在前面
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

• 配置 CORS 设置:

  在 settings.py 文件中，配置 CORS 相关的设置，以允许来自特定源的请求。

• 允许所有来源（开发环境，不推荐生产环境）：

  如果你只是在本地开发，为了方便起见，可以允许所有来源的跨域请求。但这 不推荐用于生产环境，因为存在安全风险。

  CORS_ALLOW_ALL_ORIGINS = True
  

• 允许特定来源（推荐，生产环境必须配置）：

  更安全的方式是只允许来自你的 Flutter 前端应用运行的特定源的跨域请求。 你需要将 'http://localhost:63262' 添加到 CORS_ALLOWED_ORIGINS 列表中。 如果你的前端应用部署到线上域名，也需要将你的前端域名添加到列表中。

  CORS_ALLOWED_ORIGINS = [
      "http://localhost:63262",  # 允许你的 Flutter Web 应用开发时的源
      # "https://your-frontend-domain.com", # 如果你的前端应用有线上域名，也添加到这里
  ]
  

• 选择哪种方式取决于你的环境。 开发阶段为了方便可以使用 CORS_ALLOW_ALL_ORIGINS = True，但一旦部署到生产环境，务必改为 CORS_ALLOWED_ORIGINS 并明确指定允许的来源。

• 重启 Django 服务器:

  修改 settings.py 后，务必重启你的 Django 开发服务器，让配置生效。

• 再次测试 Flutter 前端登录:

  重新运行你的 Flutter Web 应用，再次尝试登录。 此时，CORS 错误应该消失，登录请求应该可以正常发送到后端并得到响应。