目录
1、浏览器的同源策略
1.1 源
1.2 同源与非同源
1.3 同源请求与非同源请求
2、跨域受到的限制
3、注意点
4、CORS解决Ajax跨域问题
4.1 CORS概述
4.2 CORS解决简单请求跨域
4.3 简单请求与复杂请求
4.4 CORS解决复杂请求跨域
4.5 借助CORS库快速完成配置
5、JSONP解决跨域
6、配置代理解决跨域
6.1 自己配置代理服务器
6.2 使用Nginx搭建代理服务器
6.3 借助脚手架搭建代理服务器
1、浏览器的同源策略
浏览器为了确保资源安全，而遵循的一种策略。
1.1 源
源 = 协议 + 域名 + 端口号
1.2 同源与非同源
1.3 同源请求与非同源请求
所处源与目标源不一致，就是非同源，又称异源或跨域
2、跨域受到的限制
例如：源A和源B，它们是非同源，则浏览器会有如下限制
- DOM访问限制：源A的脚本不能读取和操作源B的DOM
- Cookie访问限制：源A不能访问源B的cookie
- Ajax响应数据限制：源A可以给源B发请求，但是无法获取源B的响应的数据
备注：在上述限制中，浏览器对Ajax获取数据的限制是影响最大的一个，且实际开发中经常遇到
3、注意点
- 跨域限制仅存在浏览器端，服务端不存在跨域限制
- 即使跨域了，Ajax请求也可以正常发出，但响应数据不会交给开发者
- <link>、<script>、<img>....这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响
4、CORS解决Ajax跨域问题
4.1 CORS概述
CORS全称：Cross-Origin Resource Sharing（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头来控制浏览器校验，规则如下：
- 服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过
- 服务器明确表示允许跨域请求，则浏览器校验通过
备注：使用CORS解决跨域是最正统的方式，且要求服务器是“自己人”
4.2 CORS解决简单请求跨域
整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过
服务端核心代码，以（express框架为例）
const express = require('express') const app = express() const data = [ { id: 123, name: '张三' }, { id: 456, name: '李四' }, { id: 789, name: '赵云' }, ] app.get('/student', (req, res) => { res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500') res.send(data) }) app.listen(1234, () => { console.log('服务运行中...') })
4.3 简单请求与复杂请求
CORS会把请求分为两类、分别是：简单请求、复杂请求
简单请求 复杂请求 请求方法为：GET、HEAD、POST
- 不是简单请求，就是复杂请求
- 复杂请求会自动发送预检请求
请求字段要符合《CORS安全规范》
简记：只要不手动修改请求头，一般都能符合改规范
请求头的Content-Type的值只能是以下三种
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
关于预检请求：
- 发送时机：预检请求再实际跨域请求之前发出，是由浏览器自动发起的
- 主要作用：用于向服务器确认是否允许接下来的跨域请求
- 基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求
- 请求头内容：一个OPTIONS预检请求，通常会包含如下请求头
请求头 含义 Origin 发起请求的源 Access-Control-Request-Method 实际请求的HTTP方法 Access-Control-Request-Headers 实际请求中使用的自定义头（如果有的话）
4.4 CORS解决复杂请求跨域
1、第一步：服务器先通过浏览器的预检请求，服务器需要返回如下响应头
响应头 含义 Access-Control-Allow-Origin 允许的源 Access-Control-Allow-Methods 允许的方法 Access-Control-Allow-Headers 允许的自定义头 Access-Control-Max-Age
预检请求的结果缓存时间（可选） 服务端核心代码：
const express = require('express') const app = express() const data = [ { id: 123, name: '张三' }, { id: 456, name: '李四' }, { id: 789, name: '赵云' }, ] app.options('/student', (req, res) => { res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500') res.setHeader('Access-Control-Allow-Method', 'GET') res.setHeader('Access-Control-Allow-Headers', 'a,b,c') res.setHeader('Access-Control-Allow-Age', 9000) res.send() }) app.get('/student', (req, res) => { res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500') res.send(data) }) app.listen(1234, () => { console.log('服务运行中...') })
4.5 借助CORS库快速完成配置
上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors库，可以更方便完成配置
1、安装cors
npm i cors2、简单配置
app.use(cors())3、完整配置
const corsOption = { origin: 'http://127.0.0.1:5500', // 允许的源 methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允许的方法 allowedHeaders: [], // 允许的自定义头 exposedHeaders: [], // 要暴露的响应头 optionsSuccessStatus: 200, // 预检请求成功的状态码 } app.use(cors(corsOption))
5、JSONP解决跨域
1、JSONP概述：JSONP是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早起一些浏览器不支持CORS时，可以靠JSONP解决跨域
2、基本流程
- 第一步：客户端创建一个<script>标签，并将其src属性设置为包含跨域请求的URL，同时准备一个回调函数，这个回调函数用于处理返回的数据
- 第二步：服务端接收到请求后，将数据封装在回调函数中并返回
- 第三步：客户端的回调函数被调用。数据以参数的形式传入回调函数。
3、图示
4、服务端核心代码：
const express = require('express') const app = express() const data = [ { id: 123, name: '张三' }, { id: 456, name: '李四' }, { id: 789, name: '赵云' }, ] app.get('/getData', (req, res) => { res.send(`fn(${JSON.stringify(data)})`) }) app.listen(1234, () => { console.log('服务运行中...') })5、客户端核心代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button onclick="getData()">获取数据</button> </body> <script> function fn(data) { console.log(data) } function getData() { const script = document.createElement('script') script.onload = () => { script.remove() } script.src = 'http://127.0.0.1:1234/getData' document.body.appendChild(script) } </script> </html>
6、配置代理解决跨域
6.1 自己配置代理服务器
借助 http-proxy-middleware 配置代理
const { createProxyMiddleware } = require('http-proxy-middleware') // 拦截所有带有'/api'的请求,转发给target app.use( '/api', createProxyMiddleware({ target: 'https://www.toutiao.com', changOrigin: true, // 允许跨域 pathRewrite: { '^/api': '', }, }) )6.2 使用Nginx搭建代理服务器
1. 安装 Nginx
首先，你需要在你的服务器上安装 Nginx。根据你的操作系统，安装步骤可能有所不同。
在 Ubuntu/Debian 系统上：
sudo apt update sudo apt install nginx在 CentOS/RHEL 系统上：
sudo yum install epel-release sudo yum install nginx在 Fedora 系统上：
sudo dnf install nginx安装完成后，启动 Nginx 并设置开机自启：
sudo systemctl start nginx sudo systemctl enable nginx2、配置 Nginx 作为代理服务器
接下来，配置 Nginx 作为代理服务器。你可以编辑 Nginx 配置文件，通常在
/etc/nginx/nginx.conf或/etc/nginx/sites-available/default，具体路径根据操作系统和 Nginx 版本可能有所不同。基本的代理配置示例如下：
- 打开配置文件：
sudo nano /etc/nginx/nginx.conf- 添加一个
server块来配置代理设置。例如，假设你想要将所有请求代理到http://backend-server：http { ... server { listen 80; server_name your-domain.com; location / { proxy_pass http://backend-server; # 后端服务器的地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ... }这里的
proxy_pass指令将请求转发到http://backend-server。你可以根据需要更改为你实际的后端服务器地址。
proxy_set_header指令用于设置转发请求时的 HTTP 头信息。- 保存文件并退出编辑器。
- 测试配置是否正确：
sudo nginx -t- 重新加载 Nginx 配置：
sudo systemctl reload nginx3、验证代理设置
现在，你可以通过访问你的代理服务器地址来验证是否能够成功地将请求代理到后端服务器。例如，访问
http://your-domain.com，你应该能够看到来自http://backend-server的内容。4、其他配置（可选）
根据需求，你可能还需要进行其他配置，例如：
- 负载均衡： 如果你有多个后端服务器，可以使用
upstream块来进行负载均衡。- SSL/TLS 加密： 如果你需要 HTTPS，可以配置 SSL 证书来加密代理流量。
- 缓存： 配置 Nginx 缓存以提高性能。
6.3 借助脚手架搭建代理服务器
修改
vue.config.js文件：// vue.config.js module.exports = { devServer: { proxy: 'http://localhost:5000', // 代理到你的后端服务器 // 或者使用对象形式配置多个代理 /* proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, */ }, };
