跨域问题及其解决方法

含义

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

跨域限制

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

1. DOM 访问限制：源A 的脚本不能读取和操作 源B 的 DOM
2. Cookie 访问限制：源A 不能访问 源B 的 cookie
3. Ajax 响应数据限制：源A 可以给 源B 发请求，但是无法获取 源B 响应的数据

注意点

1. 跨域限制仅存在浏览器端，服务器与服务器之间不存在跨域限制
2. 即使跨域，ajax请求也能正常发出，但响应结果不会返回给开发者
3. <link>、<script>、<img>这些标签发出的请求也有可能跨域，只是浏览器对此不做严格限制

解决方法

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框架为例）：

const students=[
    {id:'1',name:'zs'},
    {id:'2',name:'ls'},
    {id:'3',name:'ww'},
]
app.get('/students',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500') // 地址可以写为'*'，表示允许任何源跨域，但这个比较危险，不推荐
    res.send(students)
})

1.3 复杂请求

什么是复杂请求

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

关于预检请求

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

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

解决复杂请求

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

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

示例服务端代码：

app.options('/students'(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
    res.setHeader('Access-Control-Allow-Methods','GET')
    res.setHeader('Access-Control-Allow-Headers','school')
    res.setHeader('Access-Control-Max-Age','7200')
    res.send()
})

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

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

1. 下载 cors

npm i cors

2. 引入 cors

const cors=require('cors')
app.use(cors())

引入后会自动设置响应头

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

async function getStudents(){
    const url='http://127.0.0.1:8081/students'
    let result=await fetch(url,{
        methods:'GET',
        heads:{
            school:'xxschool'
        }
    })
    let data=await result.json()
}

引入后响应头显示

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

app.use(cors({
    origin:'http://127.0.0.1:5500', // 允许的源
    methods:['GET','POST','PUT','DELETE','HEAD','OPTIONS'], // 允许的方法
    allowedHeaders:['school'], // 允许的自定义头
}))

2. JSONP 解决跨域问题

2.1 JSONP概述

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

2.2 步骤

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

var script = document.createElement('script')
// 将回调函数传参给后端，后端返回时会执行这个函数
script.src = 'http://127.0.0.1:8081/teachers?callback=handle'
document.body.appendChild(script)
// 回调函数
function handle(data)=>{
    console.log(data)
}

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

// 服务端代码：
const teachers=[
    {id:'1',name:'z老师'},
    {id:'2',name:'l老师'},
    {id:'3',name:'w老师'},
]
app.get('/teachers',(req,res)=>{
    const {callback} = req.query // 获取 callback 函数
    res.send(`${callback}(${JSON.stringify(teachers)})`)
})

2.3 缺点

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

3. 代理服务器

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

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

npm i http-proxy-middleware //安装

2. 引入并配置

const {createProxyMiddleware}=require('http-proxy-middleware')
app.use('/api',createProxyMiddleware({
    target:'https://www.toutiao.com', // 转发目标
    changeOrigin:true,
    pathRewrite:{
        '^/api':'' // 表示将网址的 /api 替换为空
    }
}))
/*
如果不太理解，来举个例子，假设你想要给 "https://www.toutiao.com/news/today" 发请求，
设置路径为 "https://127.0.0.1:8086/api/news/today"，
代理服务器会将 /api 替换为空，拼接上 target，
结果就会是给 "https://www.toutiao.com/news/today" 发请求
*/

最后

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