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

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. 示例

你可能感兴趣的:(前端基础,前端,html,网络,http,网络协议,javascript,改行学it)