解决跨域问题

Web 评论

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 后端允许

1
pip install django-cors-headers

1.2 注册应用

settings.py 

1
2
3
4
5
INSTALLED_APPS = (
	...
    'corsheaders',		# 加入这个应用描述
    ...
)

1.3 添加中间件

1
2
3
4
5
6
MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',# 注意顺序！！！(可以放第一个) 
    'django.middleware.common.CommonMiddleware', 
    ...
)

1.4 添加允许跨域ip

1
2
#直接允许所有主机跨域
CORS_ORIGIN_ALLOW_ALL = True 默认为False

1.5 允许携带cookie

1
CORS_ALLOW_CREDENTIALS = True

1.6 添加允许的请求头和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

1
2
3
4
5
6
const config = {
    withCredentials: false,
    headers: {
        "Access-Control-Allow-Origin": "*",
    }
}
1
axios.get(myUrl, config).then(res => console.log(res))

2.1 前端配置代理

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 时，会被代理到

https://mydomain.com/xxx