Access to XMLHttpRequest at ‘http://127.0.0.1:8000/api/test/‘ from origin ‘http://127.0.0.1:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
什么是跨域
由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。
什么是同源策略?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 Js对象无法获得 AJAX 请求不能发送
解决方案:
1.1 后端允许
pip install django-cors-headers
1.2 注册应用
settings.py
INSTALLED_APPS = (
...
'corsheaders', # 加入这个应用描述
...
)
1.3 添加中间件
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',# 注意顺序!!!(可以放第一个)
'django.middleware.common.CommonMiddleware',
...
)
1.4 添加允许跨域ip
#直接允许所有主机跨域
CORS_ORIGIN_ALLOW_ALL = True 默认为False
1.5 允许携带cookie
CORS_ALLOW_CREDENTIALS = True
1.6 添加允许的请求头和方法
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'Access-Control-Allow-Origin',
)
1.7 前端请求添加Header
const config = {
withCredentials: false,
headers: {
"Access-Control-Allow-Origin": "*",
}
}
axios.get(myUrl, config).then(res => console.log(res))
2.1 前端配置代理
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: './',
server: { //同plugins同级
cors: true,
open: true,
port: 3000, //本地端口号
proxy: { //配置代理服务器
"/api": {
target: "https://mydomain.com", //目标url
changeOrigin: true, //允许跨域
rewrite: (path) => path.replace(/^\/api/, ""), //重写路径,替换/api
}
}
}
})
当本地开发请求 http://localhost:3000/api/xxx 时,会被代理到