解决Django和Flask的跨域问题

最新推荐文章于 2022-03-28 10:29:32 发布

user_san

最新推荐文章于 2022-03-28 10:29:32 发布

阅读量332

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/user_san/article/details/108715766

版权

Django 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

2.1、概念：什么是同源；

答：浏览器以协议、域名和端口来标示一个资源的来源，如果协议、域名和端口相同则资源是同源的(意味来自相同的服务器)！

url
http://www.meiduo.site:8080
https://www.meiduo.site:8080
http://www.meiduo.site:8000
http://127.0.0.1:8000

浏览器判断是否同源的一个隐含规则：只判断协议、域名和端口的字面值；

2.2、概念：什么是跨域请求？

答：来自A服务器的js，请求的目标是B服务器，那么这个请求称之为跨域请求！

2.3、概念：浏览器的“同源策略”。

答：当浏览器处理一个跨域请求的时候，会主动询问目标主机是否允许此次跨域请求，在得到肯定答复之后才会真的发送此次跨域请求！

2.3.1、发生了跨域请求，浏览器在遵循“同源策略”下，处理流程如下：

在这里插入图片描述

2.3.2、没有发生跨域请求的情况下浏览器会直接发送请求，如下图：

在这里插入图片描述

3、解决Django的跨域问题

安装插件django-cors-headers

pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple

3.2、修改工程配置文件

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    # ......
    # 注册第三方应用
    'corsheaders', # 解决了跨域请求问题
    # ......
]

MIDDLEWARE = [
    # 添加一个中间件来响应跨域询问OPTIONS请求
    'corsheaders.middleware.CorsMiddleware',
    # ......
]

# 添加跨域白名单，指定允许跨域请求到8000的源
CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:8080',
    'http://www.meiduo.site:8080',  # 注意，即使在hosts文件映射了127.0.0.1  www.meiduo.site，两者依然不是同源，只认字面值
]
# 或者使用：CORS_ORIGIN_ALLOW_ALL = True，表示允许所有跨域请求
# 表示跨域的多个主机之间共享cookie数据
CORS_ALLOW_CREDENTIALS = True

3.3、主机域名映射配置：

打开终端——使用vim打开 /etc/hosts文件：
在最后增加：127.0.0.1 www.meiduo.site

  1 127.0.0.1   localhost
  2 127.0.1.1   ubuntu
  3 
  4 # The following lines are desirable for IPv6 capable hosts
  5 ::1     ip6-localhost ip6-loopback
  6 fe00::0 ip6-localnet
  7 ff00::0 ip6-mcastprefix
  8 ff02::1 ip6-allnodes
  9 ff02::2 ip6-allrouters
 10 0.0.0.0 account.jetbrains.com
 11 
 12 
 13 127.0.0.1  www.meiduo.site

4、解决Flask的跨域问题

4.1 Flask组件flask-cors可以处理跨域问题, 安装

pip install flask-cors -i https://pypi.tuna.tsinghua.edu.cn/simple

4.2 在app初始化中对跨域组件初始化

from flask_cors import CORS

    # 6.允许跨域请求
    # app: 允许跨域的后端应用对象
    # supports_credentials=True 支持跨域的时候携带cookie，session，token
    # methods=[] 允许跨域的请求方法 默认：全部请求方法都允许跨域
     # CORS_ORIGINS = ['http://127.0.0.1:5000']  # 限定允许访问的域名, 不设置则全部允许
    CORS(app, supports_credentials=True)