首页 > 其他分享 >11.路由以及跨域

11.路由以及跨域

时间:2023-11-19 19:23:45浏览次数:40  
标签:11 __ 跨域 flask app xhr hello 路由

路由跨域

跨域限制

在进行前后端联调的时候,可能会遇到下面这个报错:

这个错误就是跨域问题,是发生在浏览器端的。浏览器中有一个同源策略,它是一个安全策略,用来限制源的交互。

  • 同源策略:是一种约定,它是浏览器核心也最基本的安全功能,它会阻止一个域的 JS 脚本和另外一个域的内容进行交互,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓同源(即在同一个域)就是两个页面具有相同的协议(protocol)、主机(host)和端口号(port)。
  • 跨域:当一个请求 URL 的协议、域名、端口三者之间的任意一个与当前页面 URL 不同即为跨域。

场景示例

下面来看一个具体的跨域问题的场景。

创建 flask_cors_demo.py

# 后端服务代码
from flask import Flask

app = Flask(__name__)


@app.route('/hello')
def hello():
return "hello world"


if __name__ == '__main__':
app.run(debug=True, port=5055)

templates 目录下创建 cors.html

<!-- 前端代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>跨域问题</title>
</head>
<body>
<div>
<button class="button" id="hello">click me</button>
</div>
</body>
</html>
<script type="text/javascript">
var btnHello = document.querySelector("button#hello");
btnHello.onclick = () => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.withCredentials = true;
xhr.open("get", "http://localhost:5055/hello", true);
xhr.setRequestHeader("Content-Type", "text");
xhr.send();
};
</script>

启动后端服务后,去访问前端页面,当点击按钮的时候,可以看到控制台报错:

解决跨越问题

cors 是一个 w3c 的标准,全称为跨域资源共享,允许浏览器向跨域服务器发出请求。

  • 安装 flask-cors:pip install flask-cors
  • 解决跨域问题分为两种
    • 针对全局所有的 API CORS(app)
    • 针对特定的 API @cross_origin()
    • from flask import Flask
      from flask_cors import CORS, cross_origin

      app = Flask(__name__)
      # 第一种:全局解决跨域问题
      CORS(app, supports_credentials=True)


      # 第二种:局部解决跨域问题
      # @cross_origin(supports_credentials=True)
      @app.route('/hello')
      def hello():
      return "hello world"


      if __name__ == '__main__':
      app.run(debug=True, port=5555)

    • 跨域也可以结合蓝图去使用:
    • from flask import Flask, Blueprint
      from flask_cors import cross_origin, CORS


      app = Flask(__name__)
      # 第一种:全局解决跨域问题
      CORS(app, supports_credentials=True)

      hello_route = Blueprint("hello", __name__, url_prefix="/hello")


      # 第二种:局部解决跨域问题
      # @cross_origin(supports_credentials=True)
      # @app.route('/hello')
      @hello_route.route("")
      def hello():
      return "hello world"


      if __name__ == '__main__':
      app.register_blueprint(hello_route)
      app.run(debug=True, port=5055)

    • 这样就可以解决前端报跨域错误的问题了。

标签:11,__,跨域,flask,app,xhr,hello,路由
From: https://www.cnblogs.com/csfsz/p/17842421.html

相关文章

  • 09.路由跳转
    路由跳转应用场景场景:假设在新增信息页面,完成新增操作之后需要跳转到展示页面。展示页面是个动态页面,它的逻辑是,如果有参数,则展示相关参数的结果,如果没有参数,则展示所有的信息。解决:使用 url_for() 生成url,再使用 redirect() 方法完成路径的重定向。实现当完成添......
  • 2023.11.19——每日总结
    学习所花时间(包括上课):9h代码量(行):0行博客量(篇):1篇今天,上午学习,下午学习;我了解到的知识点:1.mybatis明日计划:学习......
  • 20211104李宜时学习笔记10
    块设备I/O和缓冲区管理学习笔记1.块设备I/O缓冲区定义与作用:解释块设备I/O缓冲区的基本概念,及其在数据传输中的作用。工作原理:描述数据如何从应用程序通过缓冲区传输到块设备,反之亦然。2.UNIXI/O缓冲区管理算法基本算法:介绍UNIX系统中用于管理I/O缓冲区的常见算法。效......
  • P8611 [蓝桥杯 2014 省 AB] 蚂蚁感冒
    这道题采用贪心,两只蚂蚁相互传染后再同时掉头走,相当于穿过了对方,若无其事地走,并不会影响最后感冒的传播结果。#include<iostream>#include<algorithm>#include<cmath>#include<vector>#include<queue>usingnamespacestd;constintN=55;intn,x0,st;vector......
  • 获取非当前工作表名称并选择其中B2:B11区域
    1SubSheet3_按钮1_Click()2DimshAsWorksheet,n%,i%,arr,s3n=ThisWorkbook.Sheets.Count'取得工作表总数'4ReDimarr(1Ton)'声明变量'5ForEachshInThisWorkbook.Sheets'循环检查工作表表名'6Ifsh.Name&......
  • 【11月LeetCode组队打卡】Task2--TrieTree
    字典树Trie音同try,又称前缀树,是一颗有根树,根节点到树节点的一个路径就代表一个单词,多用于关键词检索,自动补完和拼写检查用空间换时间:借公共前缀来降低查询时间的开销根节点无内容(参考:字典树TrieTree图文详解——CSDN实现Trie题解——力扣)208.实现Trie复习一下this......
  • 【洛谷 P1125】[NOIP2008 提高组] 笨小猴 题解(字符串+映射+集合)
    [NOIP2008提高组]笨小猴题目描述笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼。但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大!这种方法的具体描述如下:假设是单词中出现次数最多的字母的出现次数,是单词中出现次数最少的字母的出现次数,......
  • 【2023潇湘夜雨】WIN11_Pro_23H2.22635.2771软件选装纯净版11.18
    【系统简介】=============================================================1.本次更新母盘来自WIN11_Pro_23H2.22635.2771。2.增加部分优化方案,手工精简部分较多。3.OS版本号为22635.2771。精简系统只是为部分用户安装,个别要求高的去MSDN下。4.集成《DrvCeo-2.15.0.5》网卡版、......
  • 【231119-1】如图,在正方形ABCD中,以AB为腰向正方形内部作等腰三角线ABE,点G在CD上,且CG=3
    【题目】如图,在正方形ABCD中,以AB为腰向正方形内部作等腰三角线ABE,点G在CD上,且CG=3DG,链接BG并延长,与AE交于F,与AD延长线交于H。连接DE交BH于点K,连接CK。若AE^2=BFBH,FG=13/5根号5.求:四边形EFKC的面积?【解答】......
  • 20231119
    下午早早来到了机房,发现tx334和StarPatrick在英雄联盟。尝试去学一些东西,但是因为他们太吵了学不进去。然后Others来了,他们三个一起开始打CS。更吵了,学不进去,所以来写日记。明天开始就要自己开始学了。有点怅然,自己NOIP考的这么烂还是要一意孤行地学OI。高一这么颓其实也......