react跨域問題Django配置允許跨域No 'Access-Control-Allow-Origin' header is present on the requested resource'，及其解決辦法

在做Scratch開發配置服務器接口時，遇到跨域問題。

控制台報錯：

No 'Access-Control-Allow-Origin' header is present on the requested resource'，

以及

Axios api call - Failed to load ,Response for preflight is invalid (redirect)

Failed to load Response for preflight has invalid HTTP status code 403

 

問題導致接口轉發，數據無法傳到目標服務接口如圖，下方數據為空：

總結解決方法如下：

1. 修改本地電腦hosts文件

    百度一下，不太推薦此辦法

2. 請求的headers添加：

options.mode = 'no-cors'

Header: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'},
完整請求：

const commonUrl = 'http://www.X.com:8001';
const options = {};
const url = commonUrl + '/Login/';
const data = {
    'password': '',
    'username': '',
    'tel': ''
}
options.method = 'post'
options.mode = 'no-cors'
options.body = JSON.stringify(data)
options.headers = {
    'Content-Type': 'application/json'
}
return fetch(url,options,{credentials:'include'})
    .then(checkStatus)
    .then(parseJSON)
    .then((res) => {
       回調邏輯
    })
    .catch(err=>({err}))

　　

3. 后台接口配置允許跨域：

我是用的是Django，下面是Django配置跨域：
（1）使用 django-cors-headers 組件

pip install django-cors-headers

　　settings.py設置：

INSTALLED_APPS = [

    'corsheaders'
]

MIDDLEWARE = [
    '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

# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True  # 指明在跨域訪問中，后端是否支持對cookie的操作
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    'https://127.0.0.1:8080',
    'https://localhost:8080', #凡是出現在白名單中的域名，都可以訪問后端接口
)
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

　　至此解決