跨域详解：从零理解到实战应用

见解分享

2023-09-28 10:06:47

跨域的由来

在Web开发中，跨域是指当一个网页试图访问来自不同域（即URL中域名不同）的资源时所产生的限制。这种限制源于浏览器的安全机制，为了防止恶意网站窃取敏感信息或执行恶意操作。

跨域类型

跨域请求可以分为两种类型：

简单请求

简单请求是指HTTP方法为GET、HEAD或POST，并且满足以下条件：

Content-Type头部值仅为"application/x-www-form-urlencoded"、"multipart/form-data"或"text/plain"。
不发送任何非简单头部，如"X-Requested-With"。
响应状态码为200。

复杂请求

非简单请求是指不满足简单请求条件的任何请求，如发送PUT、DELETE或PATCH等HTTP方法，或者发送其他非简单头部。复杂请求需要先发送一个预检（OPTIONS）请求，以检查服务器是否允许该请求。

跨域处理方案

简单请求的处理

对于简单请求，只需在服务器响应头中设置 "Access-Control-Allow-Origin" 头部，并指定允许的来源域即可。例如：

Access-Control-Allow-Origin: https://example.com

复杂请求的处理

复杂请求分两步处理：

预检请求： 浏览器发送一个OPTIONS请求，请求头中包含 "Origin" 和 "Access-Control-Request-Method" 头部。服务器响应预检请求，在响应头中设置 "Access-Control-Allow-Methods"、"Access-Control-Allow-Headers" 和 "Access-Control-Max-Age" 头部。
真实请求： 浏览器根据预检请求的响应发送实际请求。服务器在响应真实请求时，需要再次设置 "Access-Control-Allow-Origin" 头部。

通用处理方法

对于所有类型的跨域请求，推荐使用以下通用的CORS（跨域资源共享）响应头部：

"Access-Control-Allow-Origin"：指定允许的来源域。
"Access-Control-Allow-Methods"：指定允许的HTTP方法。
"Access-Control-Allow-Headers"：指定允许的请求头部。
"Access-Control-Max-Age"：指定预检请求的缓存时间，单位为秒。

实战案例

以下是一个使用Vue和Axios进行跨域请求的示例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: true
})

instance.interceptors.request.use((config) => {
  config.headers['Access-Control-Allow-Origin'] = '*'
  return config
}, (error) => {
  return Promise.reject(error)
})

instance.get('/endpoint').then((response) => {
  // 跨域请求成功
}).catch((error) => {
  // 跨域请求失败
})