一文搞懂跨域问题(代码片段)

工程师-小白 工程师-小白     2022-12-04     265

关键词:

一文搞懂跨域问题

同源策略

是浏览器的一个安全策略,保证浏览器的安全运行,要求网页中的协议名,域名和端口号要完全一致,

跨域

违背了同源策略就会产生跨域,比如说在百度的后端中写了一个请求jingdong.com的代码,就会产生跨域问题,

解决跨域办法

  1. jsonp 在前端的代码中,首先建立一个回调函数,这个回调函数的入口参数就是需要请求的数据,然后再script标签中加入src属性,src的API中拼接这个回调函数,然后发送给服务端,服务端拿到这个回调函数,执行这个回调函数并且把这个回调函数需要的参数放到回调的参数中,最后服务端将该回调函数返回给浏览器。这种方法需要前后端的配合
  • 前端代码
//前端代码 
<script>
    function callback(data)
        console.log(data)
    
</script>
<script src="http://localhost:3000?callback=callback"></script>
  • 后端代码
//后端代码基于Node
const express = require('express')

const app = express()

app.get('/', (req,res) => 

    let callback = req.query.callback

    res.send(`$callback($JSON.stringify(
        success:0,
        data:
            name:"yuefengsu"
        
    ))`)

)

app.listen(3000, () =>  console.log('开启了') )
  1. 跨域资源共享(CORS)

在请求头中,增加一个Origin字段,这个字段用来说明,本次请求来自那个源(协议+域名+端口),服务器会根据这个值,来决定是否同意这次请求。

这时后台服务器需要增加一个这样的字段CORS请求设置的响应头字段,都以 Access-Control-开头:

1)Access-Control-Allow-Origin:必选
 它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
2)Access-Control-Allow-Credentials:可选
 它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
3)Access-Control-Expose-Headers:可选
 CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

// app.js中添加
app.use((req, res, next) => 
  res.setHeader('Access-Control-Allow-Origin', '*')
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
  next()
)

一文搞懂│什么是跨域?如何解决跨域?(代码片段)

✨目录🎈什么是跨域🎈跨域场景🎈解决跨域的四种方式🎈什么是跨域域:是指浏览器不能执行其他网站的脚本跨域:它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制,所谓同源... 查看详情

一文搞懂│什么是跨域?如何解决跨域?

查看详情

一文搞懂全排列组合子集问题(建议收藏)(代码片段)

前言Hello,大家好,我是bigsai,longtimenosee!在刷题和面试过程中,我们经常遇到一些排列组合类的问题,而全排列、组合、子集等问题更是非常经典问题。本篇文章就带你彻底搞懂全排列!求全排列?全排列即:n个元素取n个元... 查看详情

一文彻底搞懂slam技术(代码片段)

什么是SLAM?SLAM (simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建,或并发建图与定位。问题可以描述为:将一个机器人放入未知环境中的未知位置,是否有办法让机器人一边逐步描... 查看详情

一文彻底搞懂slam技术(代码片段)

什么是SLAM?SLAM (simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建,或并发建图与定位。问题可以描述为:将一个机器人放入未知环境中的未知位置,是否有办法让机器人一边逐步描... 查看详情

一文搞懂this指向(代码片段)

前言那你说一下js中的this指向吧!这句话已经成为面试官口中的高频面试题,作为前端开发的我们,你真的搞懂了this指向了吗?快来跟我一起来查漏补缺吧!通过几个小案例让大家更能直白的理解this指向。很... 查看详情

一文彻底搞懂hbase(代码片段)

本文是基于CentOS7.9系统环境,进行HBase的学习和使用一、HBase的简介1.1HBase基本概念HBase是一种分布式、可扩展、支持海量数据存储的NoSQL数据库,可以解决HDFS随机写的问题1.2HBase数据模型逻辑上,HBase的数据模型同关系... 查看详情

一文彻底搞懂hbase(代码片段)

本文是基于CentOS7.9系统环境,进行HBase的学习和使用一、HBase的简介1.1HBase基本概念HBase是一种分布式、可扩展、支持海量数据存储的NoSQL数据库,可以解决HDFS随机写的问题1.2HBase数据模型逻辑上,HBase的数据模型同关系... 查看详情

一文搞懂redis(代码片段)

简介:NoSQL泛指非关系型数据库,随着web2.0互联网的诞生,传统的关系型数据库很难对付web2.0大数据时代!尤其是超大规模的高并发的社区,暴露出来很多难以克服的问题,NoSQL在当今大数据环境下发展的... 查看详情

「五大常用算法」一文搞懂分治算法(代码片段)

原创公众号:bigsai文章收录在bigsai-algorithm前言分治算法(divideandconquer)是五大常用算法(分治算法、动态规划算法、贪心算法、回溯法、分治界限法)之一,很多人在平时学习中可能只是知道分治算法,但是可能并没有系统的学... 查看详情

一文搞懂深度常用损失函数(代码片段)

一,损失函数概述大多数深度学习算法都会涉及某种形式的优化,所谓优化指的是改变$x$以最小化或最大化某个函数$f(x)$的任务,我们通常以最小化$f(x)$指代大多数最优化问题。在机器学习中,损失函数是代价函数的一部分,而... 查看详情

微信小程序一文带你搞懂小程序的页面配置和网络数据请求(代码片段)

文章目录页面配置页面配置文件的作用页面配置和全局配置的关系页面配置网络数据请求网络数据请求的限制配置request合法域名发起get/post请求在页面刚加载时请求数据跳过request合法域名校验关于跨域和ajax请求页面配置每个小... 查看详情

五大常用算法一文搞懂分治算法(代码片段)

前言分治算法(divideandconquer)是五大常用算法(分治算法、动态规划算法、贪心算法、回溯法、分治界限法)之一,很多人在平时学习中可能只是知道分治算法,但是可能并没有系统的学习分治算法,本篇就带你较为全面的去认识... 查看详情

一文搞懂web端登录过程(代码片段)

一文搞懂web端登录过程无状态HTTP协议session和cookiecookie(存放在客户的浏览器上)session(存放在服务器端)session和cookie的区别token登录过程token验证在了解登陆过程的原理前,应该先弄清楚几个概念无状态HTTP... 查看详情

http/https一文搞懂(代码片段)

HTTP协议(HyperTextTransferProtocol,超文本传输协议):是一种发布和接收HTML页面的方法。HTTPS(HypertextTransferProtocoloverSecureSocketLayer)简单讲是HTTP的安全版,在HTTP下加入SSL层。SSL(S 查看详情

http/https一文搞懂(代码片段)

HTTP协议(HyperTextTransferProtocol,超文本传输协议):是一种发布和接收HTML页面的方法。HTTPS(HypertextTransferProtocoloverSecureSocketLayer)简单讲是HTTP的安全版,在HTTP下加入SSL层。SSL(S 查看详情

一文搞懂底层mysql索引那些事(代码片段)

前言因为一些原因,最近总有人问起mysql的一些问题,这个似乎成为检验程序员的技术的基本问题,今天就做个系统性的总结,留作以后复习,也分享给需要的同学。索引是为了加速对表中数据行的检索而创建... 查看详情

一文搞懂sae日志采集架构(代码片段)

日志,对于一个程序的重要程度不言而喻。无论是作为排查问题的手段,记录关键节点信息,或者是预警,配置监控大盘等等,都扮演着至关重要的角色。是每一类,甚至每一个应用程序都需要记录和查看... 查看详情