后端跨域

378 阅读1分钟
在前端调用api的时候无法获得Flask本地服务器后端返回的json数据
在浏览器控制台爆出了

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

eVjrpd.jpg

大致意思好像是访问没被允许

事情原因

我参照https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/ 去学习api的知识 在修改了js请求后端发过来的json数据后无法访问,爆出了刚才的错误

eVjBfH.jpg

先开始不知道是怎么回事,前端一直无法获得json数据,但是请求时对的, 找了好久,差点误入歧途,全都是关于前端怎么跨域访问的教程,完全是借助相关的漏洞获取没有被允许的数据资源,

解决

后端跨域访问数据是需要后端允许的,官方是通过CORS放权解决 它会在你发送下面几种HTTP请求时触发:

  • 不同的域名 (比如在网站 example.com 请求 api.com)
  • 不同的子域名 (比如在网站 example.com 请求 api.example.com)
  • 不同的端口 (比如在网站 example.com 请求 example.com:3001)
  • 不同协议 (比如在网站 example.com 请求 example.com) 这个机制阻止攻击者在一些网站上放置js脚本
  1. 安装 flask-cors

pip install flask-cors

  1. 导入包

from flask_cors import CORS

  1. 全局数据app应用的数据

app = Flask(name) CORS(app)

再次请求

运行index.html文件

eVviB6.jpg

OK了