跨域是指浏览器受同源（协议、域名、端口）策略的限制，不允许不同源的站点之间进行某些操作（如发送ajax请求，操作dom，读取cookie）

假设 源A 和 源B 是非同源的，则浏览器有以下限制：

1. DOM 访问限制：源A 的脚本不能读取和操作 源B 的 DOM

2. Cookie 访问限制：源A 不能访问 源B 的 cookie

3. Ajax 响应数据限制：源A 可以给 源B 发请求，但是无法获取 源B 响应的数据

4. 跨域限制仅存在浏览器端，服务器与服务器之间不存在跨域限制

5. 即使跨域，ajax请求也能正常发出，但响应结果不会返回给开发者

6. 、

1. CORS

1.1 概述

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

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

CORS 跨域方案将所有请求划分为简单请求和非简单请求两类，对其分别采用不同的处理方案。

1.2 简单请求

什么是简单请求

1. 请求方法为：GET、HEAD、POST
2. 请求头字段要符合《CORS安全规范》（只要不手动修改请求头，一般都符合该规范）
3. 请求头的 Content-Type 的值只能是以下三种：text/plain、multipart/form-data、application/x-www-form-urlencoded

解决简单请求

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

服务端代码（Express框架为例）：

复制 1const students=[
 2    {id:'1',name:'zs'},
 3    {id:'2',name:'ls'},
 4    {id:'3',name:'ww'},
 5]
 6app.get('/students',(req,res)=>{
 7    res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500') 
 8    res.send(students)
 9})

1.3 复杂请求

什么是复杂请求

1. 不是简单请求，就是复杂请求
2. 复杂请求会自动发送预检请求

关于预检请求

1. 发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的
2. 主要作用：用于向服务器确认是否允许接下来的跨域请求
3. 基本流程：先发起 OPTIONS 请求，如果通过预检，继续发起实际的跨域请求
4. 请求头内容：一个 OPTIONS 预检请求，通常会包含如下请求头

请求头	含义
Origin	发起请求的源
Access-Control-Request-Method	实际请求的HTTP方法
Access-Control-Request-Headers	实际请求中使用的自定义头（如果有的话）

解决复杂请求

• 服务器通过浏览器的预检请求，需要设置如下响应头

响应头	含义
Access-Control-Allow-Origin	允许的源
Access-Control-Allow-Methods	允许的方法
Access-Control-Allow-Headers	允许的自定义头
Access-Control-Max-Age	预检请求的结果缓存时间（可选），在这个时间内不用重新发起预检请求

示例服务端代码：

复制 1app.options('/students'(req,res)=>{
 2    res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
 3    res.setHeader('Access-Control-Allow-Methods','GET')
 4    res.setHeader('Access-Control-Allow-Headers','school')
 5    res.setHeader('Access-Control-Max-Age','7200')
 6    res.send()
 7})

• 接下来处理实际的跨域请求（和处理简单请求跨域的方法一样）

1.4. 借助 cors 库快速完成配置

• 下载 cors

复制 1npm i cors

• 引入 cors

复制 1const cors=require('cors')
 2app.use(cors())

引入后会自动设置响应头

举个例子，以下是请求代码：

复制 1async function getStudents(){
 2    const url='http://127.0.0.1:8081/students'
 3    let result=await fetch(url,{
 4        methods:'GET',
 5        heads:{
 6            school:'xxschool'
 7        }
 8    })
 9    let data=await result.json()
10}

引入后响应头显示 可以看到 Access-Control-Allow-Headers 和我们请求头一致，而 Access-Control-Allow-Methods 包含了全部方法，而 Access-Control-Allow-Origin 为 * ，允许任何源跨域，这比较危险，因此我们要写配置项

复制 1app.use(cors({
 2    origin:'http://127.0.0.1:5500', 
 3    methods:['GET','POST','PUT','DELETE','HEAD','OPTIONS'], 
 4    allowedHeaders:['school'], 
 5}))

2. JSONP 解决跨域问题

2.1 JSONP概述

JSONP 利用了 script 标签不受同源策略影响，可以跨域加载脚本的特点

2.2 步骤

1. 定义一个 callback 回调函数用于处理后端传递的数据
2. 设置 src 属性的 query 为回调函数的名字

复制 1var script = document.createElement('script')
 2
 3script.src = 'http://127.0.0.1:8081/teachers?callback=handle'
 4document.body.appendChild(script)
 5
 6function handle(data)=>{
 7    console.log(data)
 8}

3. 后端收到后用 callback 函数名将数据包裹起来，返回给前端，资源加载完成后，回调函数会被立即调用，此时的实参就是我们需要的数据

复制 1
 2const teachers=[
 3    {id:'1',name:'z老师'},
 4    {id:'2',name:'l老师'},
 5    {id:'3',name:'w老师'},
 6]
 7app.get('/teachers',(req,res)=>{
 8    const {callback} = req.query 
 9    res.send(`${callback}(${JSON.stringify(teachers)})`)
10})

2.3 缺点

• 只支持 get 请求
• 需要服务端专门配置

3. 代理服务器

利用的是服务器和服务器之间没有跨域限制

1. 借助 http-proxy-middleware 配置代理

复制 1npm i http-proxy-middleware 

2. 引入并配置

复制 1const {createProxyMiddleware}=require('http-proxy-middleware')
 2app.use('/api',createProxyMiddleware({
 3    target:'https://www.toutiao.com', 
 4    changeOrigin:true,
 5    pathRewrite:{
 6        '^/api':'' 
 7    }
 8}))
 9
10如果不太理解，来举个例子，假设你想要给 "https://www.toutiao.com/news/today" 发请求，
11设置路径为 "https://127.0.0.1:8086/api/news/today"，代理服务器会将 '/api' 替换为空，
12拼接上 target，结果就会是给 "https://www.toutiao.com/news/today" 发请求
13*/

跨域解决方法还包括 使用 Nginx 搭建代理服务器，借助脚手架搭建服务器，感兴趣的可以了解一下