智能燃气表-服务器-跨域问题处理

跨域问题简述

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

调试过程

问题说明

在部署过程中采用了nginx代理服务器，已采用反向代理，隐藏了真实服务器的ip地址，将动态请求转发给部署在服务器端的uwsgi进行处理。通过ip访问时一切正常，但通过域名访问时，发现get和post请求均无法有效的得到数据，通过服务器端的uwsgi日志文件可以发现相应的动态请求已经被服务器响应。说明是浏览器未允许返回数据的显示。

打开调试台，发现请求报错

Access to XMLHttpRequest at ''123.123.54/admin/" from origin ‘xxx.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

结合所查看的日志文件，说明是发生了跨域，相关请求正常发起，但结果被浏览器拦截。

修改URL

查看静态文件，发现请求的URL为123.123.54，将其修改为网站对应的域名xxx.com，重新加载静态文件，发现可以正常获得数据。

但如此处理并没有从根本上解决跨域问题，因为只是通过变更请求的域名，使请求变为了同域请求，例如此时通过www.xxx.com进行相同的post请求，依然被浏览器拦截。

Access to XMLHttpRequest at ''xxx.com/admin/" from origin ‘www.xxx.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

采用django扩展类Django-cors-headers

发现该类在版本3.7时仅支持python3.5以上，需要

安装过程中会将django版本自动更新至3.5，造成环境失效，因此在安装完成之后需要将django版本回退至2.2

pip3 uninstall django
pip3 install django == 2.2

然后在setting.py中注册app

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

同时需要在中间层中配置监听

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

注意要将CorsMiddleware放在产生回应的层前面（例如CommonMiddleware），最简单的是放在最前面

之后需要配置访问白名单

可以允许一切跨域访问

CORS_ALLOW_ALL_ORIGINS = True

可以配置访问站点

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

还可通过正则表达式进行进一步域名访问控制，详情参阅官方文档

此时可以通过www.xxx.com进行跨域访问