跨域&解决方案

已于 2024-08-07 00:54:29 修改
阅读量1.2k 收藏 18
点赞数 18
分类专栏： JavaScript 文章标签： 前端
于 2024-08-07 00:54:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45108629/article/details/140969363
版权

b站视频链接

跨域&解决方案

浏览器的同源策略

同源策略概述

浏览器为确保资源安全，而遵循的一种策略

什么是源

  1. 源的组成部分

    源=协议+域名+端口号

  2. 下面表格中，只有最后一行的两个源是同源

    在这里插入图片描述

  3. 同源请求与非同源请求

    在这里插入图片描述

  4. 总结：【所处源】与【目标源】不一致，就是【非同源】，又称【异源】或【跨域】

跨域会受到哪些限制

在这里插入图片描述

备注：在上述限制中，浏览器限制a ja x获取数据的限制是影响最的的一个，且实际开发中经常遇到

限制DOM访问

<body>
    <button onclick="showDOM()">showDOM</button>

    <!-- <iframe id="framePage" src="./demo.html" frameborder="0"></iframe> -->
    <iframe id="framePage" src="https://www.baidu.com"></iframe>
  </body>

  <script type="text/javascript">
    function showDOM() {
      const framePage = document.getElementById('framePage')
      console.log(framePage.contentWindow.document) //同源的可以获取，非同源的无法获取
    }
  </script>

限制Cookie访问

<body>
    <button onclick="showCookie()">showCookie</button>

    <iframe id="framePage" src="https://www.baidu.com"></iframe>
  </body>

  <script type="text/javascript">
    function showCookie() {
      console.log(document.cookie)
      const framePage = document.getElementById('framePage')
      console.log(framePage.contentWindow.document.cookie)
    }
  </script>

限制Ajax获取数据

<body>
    <button onclick="getData()">getData</button>
  </body>

  <script type="text/javascript">
    async function getData() {
      const url = 'https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc'
      let result = await fetch(url)
      let data = await result.json()
      console.log(data)
    }
  </script>

Access to fetch at 'https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

几个注意点

  1. 跨域限制仅存在浏览器端，服务端不存在跨域限制

  2. 即使跨域了，ajax请求也可以正常发出，但相应数据不会交给开发者

    在这里插入图片描述

  3. link标签、script标签、img标签等这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

CORS解决Ajax跨域方案

CORS概述

CORS全称：Cross-Origin Rresource Sharing(跨域资源共享)，是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头来控制浏览器校验，大致规则如下：

  • 服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过
  • 服务器明确表示允许跨域请求，则浏览器校验通过

备注：使用CORS解决跨域是最正统的方式，且要求服务器是“自己人”

CORS解决简单请求跨域

整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过

在这里插入图片描述

请求代码

<body>
	<button onclick="getData()">getData</button>
</body>

<script type="text/javascript">
  async function getData() {
    const url = 'http://127.0.0.1:8081/students'
    let result = await fetch(url)
    let data = await result.json()
    console.log(data)
  }
</script>

服务器代码（以express框架为例）

const express = require('express')
const app = express()

const students = [
  {
    id: 1,
    name: 'st1'
  },
  {
    id: 2,
    name: 'st2'
  },
  {
    id: 3,
    name: 'st3'
  }
]

app.get('/students', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.send(students)
})

// 启动服务器
app.listen('8081', () => {
  console.log(`Server is running at http://127.0.0.1:8081`)
})

简单请求与复杂请求

CORS会把请求分为两类，分别是 简单请求、复杂请求
在这里插入图片描述
在这里插入图片描述

CORS解决复杂请求跨域

  1. 第一步：服务器先通过浏览器的预检请求，服务器需要返回如下响应头

    在这里插入图片描述

    在这里插入图片描述

  2. 第二步：处理实际的跨域请求（与处理简单请求跨域的方式相同）

    请求代码：

    <body>
	<button onclick="getData()">getData</button>
</body>

<script type="text/javascript">
  async function getData() {
    const url = 'http://127.0.0.1:8081/students'
    let result = await fetch(url, {
      method: 'GET',
      headers: {
        name: 'ym',
        age: 120
      }
    })
    let data = await result.json()
    console.log(data)
  }
</script>

    服务端代码：

    const express = require('express')
const app = express()

const students = [
  {
    id: 1,
    name: 'st1'
  },
  {
    id: 2,
    name: 'st2'
  },
  {
    id: 3,
    name: 'st3'
  }
]
app.options('/students', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.setHeader('Access-Control-Allow-Method', 'GET')
  res.setHeader('Access-Control-Allow-Headers', 'name,age')
  res.setHeader('Access-Control-Max-Age', 7200)
  res.send()
})
app.get('/students', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.send(students)
})

// 启动服务器
app.listen('8081', () => {
  console.log(`Server is running at http://127.0.0.1:8081`)
})

借助cors库快速完成配置

上述的配置需要自己配置响应头，或者需要自己手动封装中间件，借助cors库，可以更方便完成配置

  1. 安装cors

    npm i cors

  2. 简单配置cors

    app.use(cors())

  3. 完整配置cors

    const corOptions = {
  origin: 'http://127.0.0.1:5500', //允许的源
  methods: ['get', 'post', 'put', 'delete', 'head', 'options'], //允许的方法
  allowHeaders: ['name', 'age'], //允许的自定义头
  exposedHeaders: ['age'], //要暴露的响应头
  optionsSuccessStatus: 200 //预检请求成功的状态码
}
app.use(cors(corOptions))

JSONP解决跨域问题

  1. JSONP概述：JSONP是利用script标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持CORS的时候，可以靠JSONP解决跨域

  2. 基本流程

    1. 客户端创建一个script标签，并将其src属性设置为包含跨域请求的url。同时准备一个回调函数，这个回调函数用于处理返回的数据
    2. 服务端接收到请求后，将数据封装在回调函数中并返回
    3. 客户端的回调函数被调用，数据以参数的形式传入回调函数

  3. 图示

    在这里插入图片描述

  4. 代码示例

    <body>
	<button onclick="getData()">getData</button>
</body>

<script type="text/javascript">
  function test(data) {
  	console.log(data)
  }
  function getData() {
    const script = document.createElement('script')
    script.src = 'http://127.0.0.1:8081/students?callback=test'
    document.body.appendChild(script)

    script.onload = () => {
    	script.remove()
    }
  }
</script>

    app.get('/students', (req, res) => {
  const { callback } = req.query
  res.send(`${callback}(${JSON.stringify(students)})`)
})

  5. jQuery封装的jsonp

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
  $.getJSON('http://127.0.0.1:8081/students?callback=?', data => {
  	console.log(data)
  })
</script>

配置代理解决跨域

自己配置代理服务器

借助http-proxy-middleware

使用ngin x搭建代理服务器

借助脚手架搭建服务器

小小小的学习日记
关注
专栏目录
彻底搞懂前端跨域&解决方案
每天都要努力学习哦~~
07-12 2227
同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。。1源的组成部分2下面表格中，只有最后一行的两个源是同源。源 1源 2是否同源⛔非同源️⛔非同源⛔非同源✅同 源︎3同源请求4非同源请求5总结:『所处源』与『目标源』不一致，就是『非同源』，又称『异源』或『跨域』
前端开发攻略---彻底弄懂跨域&解决方案
nibabaoo的博客
08-14 1354
（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过服务器明确表示允许跨域请求，则浏览器校验通过备注：使用CORS解决跨域是最正统的方式，且要求服务器是“自己人”
跨域问题解决方案（三种）
usa_washington的博客
09-15 1600
三种方式解决跨域
js跨域的解决方案
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
跨域以及解决方案
starry-sea1412的弃坑之路
08-04 670
随着API的广泛使用和前后端分离架构的流行，跨域的处理将成为开发者不可或缺的技能之一。正确地实施跨域解决方案不仅能够提高应用的灵活性，还能增强用户体验，为开发者创造高效、安全的Web环境。
Springboot解决跨域问题方案总结(包括Nginx，Gateway网关等)
热门推荐
qq_35716689的博客
03-23 25万+
跨域问题是浏览器为了保护用户的信息安全，实施了同源策略（Same-Origin Policy），即只允许页面请求同源（相同协议、域名和端口）的资源，当 JavaScript 发起的请求跨越了同源策略，即请求的目标与当前页面的域名、端口、协议不一致时，浏览器会阻止请求的发送或接收。
跨域原理及解决方案
Insist_bin的博客
08-02 1087
前言 跨域是什么，为什么会有跨域？跨域的解决方法是什么？常用的是什么？原理是什么？ 什么是跨域 跨域是指从一个域名去请求另一个域名的资源。 严格来说，只要域名，协议，端口任何一个不同，就视为跨域。 跨域场景 以下这种看上去再相似也没有用，都是跨域。 主域不同 http://www.chrome.cn/index.html http://www.chomper.cn/server.php 子域名不同 http://abc.chomper.cn/index.html http:/.
跨域的解决方案
suiyishiguang的博客
03-30 4234
【大型电商项目开发】跨域-11
PHP Ajax跨域问题解决方案代码实例
01-19
本文通过设置Access-Control-Allow-Origin来实现跨域。 例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。 如果直接使用ajax访问，会有以下错误： XMLHttpRequest cannot load ...
spring cloud gateway请求跨域问题解决方案
08-25
Spring Cloud Gateway 请求跨域问题解决方案 Spring Cloud Gateway 作为一种基于微服务架构的API Gateway，提供了许多有用的特性，如路由、负载均衡、熔断器等。但是，在使用 Spring Cloud Gateway 时，经常会遇到...
jQuery跨域问题解决方案
10-23
在标题“jQuery跨域问题解决方案”中提到的JSONP（JSON with Padding）便是其中一种。JSONP允许跨域访问，其工作原理是允许用户传递一个回调函数名给服务器，然后服务器将返回一段JavaScript代码，其中包括了调用该...
Python项目跨域问题解决方案
12-17
首先，我们来看第一个解决方案，通过`ALLOWED_HOSTS`配置。在Django项目的`settings/dev.py`文件中，你可以定义`ALLOWED_HOSTS`列表，列出允许访问后端服务的客户端域名。例如： ```python ALLOWED_HOSTS = ['api....
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 449
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 449
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
最新发布
m0_51798113的博客
09-17 319
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
在typescript浏览器端中调用C++编写的函数，WebAssembly传递指针类型的参数，以及处理指针类型的返回值。
Xeon_CC的博客
09-17 304
最后是返回一个C++结构体指针，在TypeScript中通过DataView来获取内存中的地址偏移量来取得结构体中的数据，因为em++编译器是以32位来编译.cpp文件的，所以指针占4个字节。DataResult结构体第一个属性dArr是一个指针，那么就是地址偏移量0，然后以32位无符号整型取得dArr指针，通过这个指针去读取wasm中memoryBuffer中的数据，就可以得到dArr属性对应的值了。同理，通过地址偏移量+4来得到propCount属性，以32位整数读取数据即可。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 949
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
8种前端跨域问题解决方案详解
本文将深入解析并总结8种常见的前端跨域问题解决方案，以便开发者理解和应用。 1. 同源策略详解 - 同源策略基于三个元素：协议（protocol）、域名（domain）和端口（port）。当这三个元素完全匹配时，浏览器认为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值