0
0

详解前端中的跨域及解决措施

1、跨越介绍

1.1、概念

  1. 概念：跨域是浏览器的同源策略产生的一个限制
  2. 同源策略： - 浏览器制定的一个安全策略，这个安全策略的主要目标是：不让我们向别人的服务器发起请求- 同源策略要求：同域名、同端口号、同协议，不符合同源策略的，浏览器为了安全会阻止这个请求

1.2、如何界定服务器是自己的还是别人的

  1. 查看请求的 "协议/端口/域名" 这3个内容和请求源(当前打开页面的"协议/端口/域名")是否相同
  2. 如果三者有一者不同，那么就会触发跨域错误

1.3、常见源

  1. 常见源1：file:///E:/——没有域名/端口 => 本地磁盘的路径
  2. 常见源2：http://127.0.0.1:5500/——协议是：http，域名是：127.0.0.1，端口是：5500 => 在服务器打开的路径

1.4、如何解决跨域错误

  1. 注意：如果服务端不想给跨域请求数据，那么我们解决不了跨域问题
  2. 跨域这件事其实主导者还是在服务端，如果服务端允许我们的跨域请求，那么就可以发起跨域请求，反之就不能发起请求

1.5、示例跨域错误

let btn = document.querySelector("#btn");
btn.addEventListener("click",function(){// 演示：向百度发起一个ajax请求 => 这里的演示只要是和当前源的协议、端口、域名不一致的即可 fetch("https://www.baidu.com")// 报错：报错信息中的No 'Access-Control-Allow-Origin'这段话表示ajax请求是违背了同源策略的，此时不可以发送ajax请求})

2、解决跨域——JSONP

2.1、解释

把原本的

ajax请求

——替换成：在

"script"标签

的 

"src"属性

发起请求

  1. 示例： - <script src="https://www.baidu.com"><script>——向百度发起请求
  2. 解释： - 如果我们定义了一个带有src属性的script标签，那么浏览器就会根据script标签的src属性发起请求- 注意1：我们当前发起的请求，它的响应数据会被当成js来执行！要求响应数据必须符合js代码执行标准，是有意义的js代码 => 告知服务端给我们返回的响应数据必须是有意义的js代码- 注意2：我们当前发起的请求，请求方式只能是get => 因为script标签发出去的请求没有什么危害性，也算是ajax请求的"阉割版"
  3. 和ajax请求的区别： - 发起的请求响应会被当作js代码立即执行，而ajax返回的请求响应是被放在对象中的一条属性- ajax可以任意使用请求方式
  4. 查看请求是否发送： - 在网络请求部分将过滤分页调成js- 左侧的请求图标是黄色的——把百度的代码当成js来解释

2.2、注意

  1. 当前的script标签请求会在页面打开后就立即发送
  2. 这会导致有了响应数据后，如果没有全局函数会报错，所以这种请求一定要放在全局函数创建后，再进行请求发起！

2.3、面试

  1. 问题：jsonp原理
  2. 回答：动态创建script标签，src属性指向没有跨域限制

2.4、示例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>demo-1</title></head><body><!-- 1、先设置好回调函数 --><script>functioncallback(data){
          console.log(data);}</script><!-- 2、发送jsonp请求并携带数据 --><scriptsrc="https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=你好&cb=callback"></script></body></html>

3、解决跨域——CORS跨域

3.1、简述概念

  1. CORS跨域： - CORS是在服务端返回响应的时候，向响应头中添加可以跨域访问的响应头信息实现的 => 在服务端添加响应头实现的跨域方案- 在条件允许的情况下，尽可能的使用CORS的跨域会比较好
  2. 问题：向目标服务器发起请求：http://localhost:8889报错 - 解释：如果用当前页面(open in default browser / live server)发起请求就会产生跨域问题，因为和目标服务器的路径不一致- 解决： - 注意1：要先开启测试服务器，再通过当前页面向测试服务器发起请求 => 另外：使用CORS跨域的时候，服务端必须是我们自己写的 (或者跟后端沟通，让他改一下响应头的配置项)，因为要能改服务端的代码才可以，用别人的端口实现CORS跨域不太可能- 我们需要配置服务器响应头，才可以实现跨域的数据访问- 注意2：如果服务端启用了CORS跨域，我们可以使用所有前端的ajax技术

3.2、示例客户端代码

// 1、获取页面元素的dom对象let btn = document.getElementById("btn");// 3、编写事件处理函数asyncfunctionsendRequest(){let response =awaitfetch("http://localhost:8889");let data =await response.json();
            console.log( data );// 在没有设置响应头时，点击发送请求是报错的}// 2、给元素添加事件
        btn.addEventListener("click", sendRequest)// 4、设置服务器响应头步骤——这里可以用小伙伴们自己得服务端代码，写入这行代码即可// 写入：res.setHeader("Access-Control-Allow-Origin" , "*")即可

3.3、示例服务端代码

let http  =require("http");let chalk =require("chalk");let server = http.createServer((req , res)=>{// 注意：在这里使用响应头添加工具，添加CORS跨域响应头  // res.setHeader( 响应头key"Access-Control-Allow-Origin" , 响应头value"*" );// 配置项 => "Access...：允许哪一个地址去进行跨域请求"// 地址信息 => "*"：所有地址都行；也可以写 http://127.0.0.1:5500/这种，但是这种完整的路径需要携带协议(http/其它协议)
    res.setHeader("Access-Control-Allow-Origin","*");// 响应数据let data ={"message":"我已经接受到了你的请求, 这是我给你的回应, 我是一个 json 格式","tips":"后端返回给前端的数据","code":1,}// 响应头设置（否则无法正常显示中文）
    res.setHeader("Content-Type","text/html;charset=utf8");// 将数据写入响应体
    res.write(JSON.stringify(data));// 结束响应
    res.end();})

server.listen(8889,()=>{const port = server.address().port
  const text =`
    恭喜你，服务器启动成功啦 ${ chalk.cyan('^_^')}!
    目前正在监听 ${ chalk.red(port)} 端口号!
    基准地址: ${ chalk.red('http://localhost:'+ port)}`
  console.log(text)});

4、解决跨域——服务器代理跨域

4.1、简述概念

  1. 服务器代理跨域就是在本地开启一个服务器，代理发送我们的请求
  2. 可以实现跨域的原因是：因为同源策略是给浏览器设置的，对服务器不生效，所以我们的服务器代理跨域是不受同源策略限制的

4.2、示例客户端代码

<body><buttonid="btn">向百度接口发起请求</button><buttonid="btn2">向代理服务器发起请求</button><script>// 测试是否可以直接向百度发起请求 => 不能，会报错let btn = document.getElementById("btn");functionsendRequest(){fetch("https://www.baidu.com/sugrec")}
        btn.addEventListener("click", sendRequest )// 根据代理服务器(proxy-server.js)——测试代理请求let btn2 = document.getElementById("btn2");asyncfunctionsendProxyRequest(){// 1、此时我们的代理请求就是 => 给本地的代理服务器发请求，具体服务器怎么做那是服务器的事了 let response =awaitfetch("http://localhost:8890");// 2、给我们自己配置的本地服务器发送请求，让它替我们向百度发请求// 3、注意：如果本地服务器没设置cors跨域的话，一样会报错，所以不要忘记在proxy-server.js配置响应头，先实现能给自己的服务器发送请求，再让它代替我们发请求let data =await response.json();
            console.log( data );}
        btn2.addEventListener("click", sendProxyRequest )</script></body>

4.3、示例服务端代码

let http  =require("http");let chalk =require("chalk");let axios =require("axios");let server = http.createServer(async(req , res)=>{// 代理服务器配置cors跨域
    res.setHeader("Access-Control-Allow-Origin","*");// 配置请求信息let options ={params:{prod:"pc",from:"pc_web",wd:"hello world",// !发起的请求可以不带cb => 因为这是服务器端}}// 使用axios根据路径进行请求配置: let{ data }=awaitaxios("https://www.baidu.com/sugrec", options )// 响应头设置 => 否则无法正常显示中文// 响应头设置 => 否则无法正常显示中文
    res.setHeader("Content-Type","text/html;charset=utf8");// 将数据写入响应体 
    res.write(JSON.stringify(data));// 结束响应
    res.end();})

server.listen(8890,()=>{const port = server.address().port
  const text =`
    恭喜你, 服务器启动成功啦 ${ chalk.cyan('^_^')} !
    目前正在监听 ${ chalk.red(port)} 端口号 !
    基准地址: ${ chalk.red('http://localhost:'+ port)}`
  console.log(text)});

4.4、服务器代理原理示例图

在这里插入图片描述

标签： 前端 html 网络
本文转载自: https://blog.csdn.net/2301_78675670/article/details/141923164
版权归原作者 6230_ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“详解前端中的跨域及解决措施”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航