跨域问题及其解决方案

跨域是指浏览器受同源（协议、域名、端口）策略的限制，不允许不同源的站点之间进行某些操作（如发送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框架为例）：

复制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 预检请求，通常会包含如下请求头

#解决复杂请求

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

示例服务端代码：

复制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()
})

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

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

• 下载 cors

复制npm i cors

• 引入 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 
    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':'' 
    }
}))

如果不太理解，来举个例子，假设你想要给 "https://www.toutiao.com/news/today" 发请求，
设置路径为 "https://127.0.0.1:8086/api/news/today"，代理服务器会将 '/api' 替换为空，
拼接上 target，结果就会是给 "https://www.toutiao.com/news/today" 发请求
*/

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