浏览器跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47218954/article/details/128772131

URL构成

https://wenku.baidu.com:443/view/4915ac1fff00bed5b9f31dd6.html?_wkts_=1674822474007

协议：https；

域名：wenku.baidu.com；（.com：顶级域名；baidu：一级域名；wenku：二级域名）

端口：443（可不写，如果不写，就默认使用协议本身的，常见的有http 80，https 443）

路径：/view/4915ac1fff00bed5b9f31dd6.html

参数：_wkts_=1674822474007

锚：#后面的，用来定位页面的内容，上述URL没有，可以去百度百科看，随便打开一个百度百科都有

同源策略

当两个 URL 的协议、域名和端口都相同时，这两个 URL就是同源的。同源策略是浏览器最核心、最基本的安全功能，它会保护用户的信息安全,防止恶意网站窃取用户在浏览器上的数据。现在所有支持JavaScript 的浏览器都会使用这个策略。

同源策略的限制：

某个域下的Ajax无法发送跨域请求。

某个域下的Js脚本不能访问其它域下的Dom、Cookie、LocalStorage、IndexDB。

跨域

跨域即不同域之间的访问,由于浏览器同源策略的限制，不同域之间无法访问，这给实际开发产生了很多麻烦。在前后端分离的模式下，就会发生跨域访问问题。

前端同学应该知道的实现跨域方法汇总：

JSONP(不太常用，比起后两种)

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

原理：拥有src或href属性的标签都可以获取外部资源，同源策略主要限制的是Ajax,对这些标签限制较小。因此，完全可以使用这些拥有src或href属性的标签实现跨域。比如：a 、script、img、iframe、link。在使用方法上，script标签是以上中最为方便、合理的一种，因此用它比较多。

注意：此方法只适用于get请求，并且与Ajax没有任何关系，且需要前后端共同配合。

实现（下述代码中的api是可以用的，小伙伴们可以拿去练手）：

<!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>JSONP</title>
</head>

<body>
  <input id="input" type="text" placeholder="请输入商品">
  <button>搜索</button>
  <script>
    //声明一个全局函数
    function cb(res) {
      console.log(res)
    }

    function request(url) {
      //后端会返回函数（cb）的调用形式并拼接数据。又因为请求的是脚本文件，所以会直接执行，这样先前定义好的回调函数cb就可以被调用了。
      const script = document.createElement('script');
      script.src = url;
      script.onload = function () {
        script.remove();
      };
      document.body.appendChild(script);
    }

    document.querySelector('button').onclick = function () {
      const search = document.getElementById("input").value;
      //callback=cb,callback由后端定义，cb由前端定义。
      request(`http://suggest.taobao.com/sug?code=utf-8&q=${search}&callback=cb`);
    }
  </script>
</body>

</html>

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

由概念可知，实现CORS的关键是服务器，服务器支持了，浏览器就允许跨域通信；否则，就不允许。

原理：CORS将请求分为两类：简单请求和非简单请求（预检请求）。

简单请求：

请求方法为：GET、POST、HEAD

请求头的Content-Type为：application/x-www-form-urlencoded、multipart/form-data、text/plain

头部字段不超出：Accept、Accept-Language、Content-Language、Last-Event-ID

不满足以上任何一点即非简单请求。

简单请求处理流程：

非简单请求（预检请求）处理流程：

可以看出，非简单请求的 5 6 7 8步就是简单请求。

以上即对CORS的简单梳理

实现：浏览器端无需开发人员进行任何操作，全部都由浏览器自动完成，服务器端需要在服务器端进行配置，加一个响应头：

header('Access-Control-Allow-Origin‘,'*');或
header('Access-Control-Allow-Origin‘, 允许的源);
行1对所有源开放，行2仅对允许的源开放

中间服务器代理（Proxy）

同源策略是浏览器所做的，而不是服务器做的，所以可以用一台服务器做中介者，帮助前端和后端完成跨域访问，如下举例（中间服务器由后端人员做）

前台部署地址：127.0.0.1:8080

服务器地址：127.0.0.1:8080

目标服务器地址：127.0.0.1:5000

知道以上三种跨域方式不论是开发还是面试就都够用了。

浏览器 跨域

浏览器跨域