No 'Access-Control-Allow-Origin' header is present on the requested resource.vue与Django跨域

在前端开发中，当我们使用Vue.js作为前端框架，Django作为后端框架时，可能会遇到跨域的问题。"No 'Access-Control-Allow-Origin' header is present on the requested resource"是浏览器的一种安全机制，用于防止跨域请求。

跨域是指在浏览器中，当前端页面的域名、协议或端口与后端接口的域名、协议或端口不一致时，浏览器会阻止前端页面向后端发送请求，以保护用户的安全。

要解决跨域问题，可以在Django后端进行配置。以下是一种常见的解决方案：

1. 在Django的settings.py文件中添加以下配置：

CORS_ORIGIN_ALLOW_ALL = True

这将允许所有的跨域请求。

2. 安装django-cors-headers库：

pip install django-cors-headers

3. 在Django的settings.py文件中添加以下配置：

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

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

这样就启用了django-cors-headers中间件。

通过以上配置，Django将在响应头中添加"Access-Control-Allow-Origin: *"，允许所有的跨域请求。