技術標籤：筆記pythondjango後端vue.js前端

在vue中進行axios請求資料的資料是彈出錯誤資訊

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

出現了跨域問題

解決方法：

第一步：

安裝django-cors-headers

pip3 install django-cors-headers

第二步：

在setting.py檔案中的：
MIDDLEWARE新增corsheaders.middleware.CorsMiddleware

MIDDLEWARE =
 
 [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    ......
]

第三步：

在INSTALLED_APPS裡新增corsheaders

INSTALLED_APPS = [
    .....
    'corsheaders',
    .....
]

第四步：

在最後加入：

# 定義允許的匹配路徑正則表示式
 

CORS_URLS_REGEX = '^.*$'

# 設定允許訪問的方法
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

# 設定允許的header
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent'
 
,
    'x-csrftoken',
    'x-requested-with',
)

最後：

成功請求到資料

參考: 連線