当前位置： 首页 > news >正文

前端开发攻略---彻底弄懂跨域解决方案

news 2025/9/19 13:07:13

目录

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，它们是非同源，则浏览器会有如下限制

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

备注：在上述限制中，浏览器对Ajax获取数据的限制是影响最大的一个，且实际开发中经常遇到

3、注意点

  1. 跨域限制仅存在浏览器端，服务端不存在跨域限制
  2. 即使跨域了，Ajax请求也可以正常发出，但响应数据不会交给开发者
  3. <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
  1. 不是简单请求，就是复杂请求
  2. 复杂请求会自动发送预检请求

请求字段要符合《CORS安全规范》

简记：只要不手动修改请求头，一般都能符合改规范

请求头的Content-Type的值只能是以下三种

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

关于预检请求：

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

2、简单配置

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 nginx

2、配置 Nginx 作为代理服务器

接下来，配置 Nginx 作为代理服务器。你可以编辑 Nginx 配置文件，通常在 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default，具体路径根据操作系统和 Nginx 版本可能有所不同。

基本的代理配置示例如下：

  1. 打开配置文件： 
    sudo nano /etc/nginx/nginx.conf
  2. 添加一个 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 头信息。

  3. 保存文件并退出编辑器。
  4. 测试配置是否正确： 
    sudo nginx -t
  5. 重新加载 Nginx 配置： 
    sudo systemctl reload nginx

3、验证代理设置

现在，你可以通过访问你的代理服务器地址来验证是否能够成功地将请求代理到后端服务器。例如，访问 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': '' },},},*/},
};

相关文章：

前端开发攻略---彻底弄懂跨域解决方案

目录 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、JS…...

编程日记 2024/8/21 0:03:39

【HeadFirst 设计模式】装饰者模式的C++实现

一、案例背景 Starbuzz是以扩张速度最快而闻名的咖啡连锁店。如果你在街角看到它的店&#xff0c;在对面街上肯定还会看到另一家。因为扩张速度实在太快了&#xff0c;他们准备更新订单系统&#xff0c;以合乎他们的饮料供应要求。他们原先的类设计是这样的…… 购买咖啡时&am…...

编程日记 2024/8/21 0:02:38

大白话解释TCP的三次握手和四次挥手

你好&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏和关注。个人知乎 TCP的三次握手是浏览器与服务器建立连接的过程&#xff0c;而四次挥手&#xff0c;是两者断开连接的过程。今天把客户端和服务端当做两个人&#xff0c;通过打电话的方式解释连接建立和断开的过程。 TCP…...

编程日记 2024/8/21 0:00:36

asyncua模块实现OPC UA通讯

asyncua是OPCUA的python实现&#xff0c;使用起来非常方便&#xff0c;其github地址是https://github.com/FreeOpcUa/opcua-asyncio UaExpert是OPC UA Client的GUI工具&#xff0c;当编写好server代码后并运行&#xff0c;我们可以使用UaExpert去和server进行通信。UaExpert使…...

编程日记 2024/8/20 23:58:34

RabbitMQ的核心概念

RabbitMQ是一个消息中间件&#xff0c;也是一个生产者消费者模型&#xff0c;负责接收&#xff0c;存储和转发消息。 核心概念 Producer 生产者&#xff0c;是RabbitMQ Server的客户端&#xff0c;向RabbitMQ发送消息。 Consumer 消费者&#xff0c;是RabbitMQ Server的客…...

编程日记 2024/8/20 23:57:33

【vSphere 7/8】深入浅出 vSphere 证书 Ⅰ—— 初识和了解 vSphere证书

目录 摘要1. vSphere 安全证书1.1 vSphere 安全证书的类型和有效期 2. 在 vSphere Client 中初识 vSphere 证书2.1 vCenter 8.0.3 的 vSphere Client 界面2.2 vCenter Server 7.0 Update2 到 vCenter Server 8.0 Update 2 的 vSphere Client 界面2.3 vCenter Server 7.0 到 vCe…...

编程日记 2024/8/20 23:56:32

【云备份】服务端模块-热点管理

文章目录 0.回顾extern1.介绍2.实现思想3.代码测试代码 热点管理总结 0.回顾extern extern cloudBackup::DataManager *_dataManager extern 关键字用于声明一个全局变量或对象&#xff0c;而不定义它。这意味着 _dataManager 是一个指向 cloudBackup::DataManager 类型的指针…...

编程日记 2024/8/20 23:53:29

call apply bind特性及手动实现

call // 原生的call var foo { value: 1 };function bar(...args) {console.log("this", this.value, args); }bar.call(foo)// call 改变了bar的this指向 // bar函数执行了 // 等价于 // var foo { // name: "tengzhu", // sex: "man", …...

编程日记 2024/8/20 23:52:28

pygame开发课程系列（5）： 游戏逻辑

第五章 游戏逻辑 在本章中&#xff0c;我们将探讨游戏开发中的核心逻辑&#xff0c;包括碰撞检测、分数系统和游戏状态管理。这些元素不仅是游戏功能的关键&#xff0c;还能显著提升游戏的趣味性和挑战性。 5.1 碰撞检测 碰撞检测是游戏开发中的一个重要方面&#xff0c;它用…...

编程日记 2024/8/20 23:49:24

嵌入式系统实时任务调度算法优化与实现

嵌入式系统实时任务调度算法优化与实现 目录 嵌入式系统实时任务调度算法优化与实现 引言 1.1 嵌入式系统的重要性 1.2 实时任务调度的重要性 实时任务的定义与分类 2.1 实时任务的定义 2.2 实时任务的分类 2.3 实时任务的其他分类方法 硬实时与软实时系统 3.1 硬实…...

编程日记 2024/8/20 23:46:21

Java：枚举转换

在Java中&#xff0c;你可以使用Enum.valueOf()方法将字符串转换为枚举常量。但是&#xff0c;如果你想要将枚举转换为其他类型&#xff0c;你需要自定义转换方法。以下是一个简单的例子&#xff0c;演示如何将枚举转换为整数&#xff1a; public enum Color {RED(1), GREEN(2…...

编程日记 2024/8/20 23:45:20

Vue、react父子组件生命周期

Vue 的父子组件生命周期 以下分为三部分&#xff0c;加载渲染阶段——更新阶段——销毁阶段&#xff0c;我们来一一介绍&#xff1a; 1、加载渲染阶段 在加载渲染阶段&#xff0c;一定得等子组件挂载完毕后&#xff0c;父组件才能挂载完毕&#xff0c;所以父组件的 mounted 在…...

编程日记 2024/8/20 23:43:18

HTML 基础要素解析

目录 HTML 初步认识 纯文本文件介绍 纯文本文件与其它文件的区别 Html介绍 HTML 骨架 文档类型&#xff08;!DOCTYPE&#xff09;声明 介绍 常用的 DOCTYPE 声明 meta标签 字符集 关键字和页面描述 HTML 初步认识 纯文本文件介绍 纯文本文件指的是仅包含文本内容&am…...

编程日记 2024/8/20 23:42:16

开源的向量数据库Milvus

Milvus是一款开源的向量数据库&#xff0c;专为处理向量搜索任务而设计&#xff0c;尤其擅长处理大规模向量数据的相似度检索。 官网地址&#xff1a;https://milvus.io/ 以下是关于Milvus的详细介绍&#xff1a; 一、基本概念 向量数据库&#xff1a;Milvus是一款云原生向量…...

编程日记 2024/8/20 23:41:15

设计模式-工厂方法

“对象创建”模式 通过“对象创建”模式绕开new&#xff0c;来避免对象创建&#xff08;new&#xff09;过程中所导致的紧耦合&#xff08;依赖具体类&#xff09;&#xff0c;从而支持对象创建的稳定。它是接口抽象之后的第一步工作。典型模式 Factory MethodAbstract Factory…...

编程日记 2024/8/20 23:40:13

Flask SQLALchemy 的使用

Flask SQLALchemy 的使用 安装 Flask-SQLAlchemy配置 Flask-SQLAlchemy定义模型创建数据库和表插入和查询数据更新和删除数据迁移数据库总结Flask-SQLAlchemy 是一个 Flask 扩展，它简化了 Flask 应用中 SQLAlchemy 的使用。SQLAlchemy 是一个强大的 SQL 工具包和对象关系映射（…...

编程日记 2024/8/20 23:38:12

Metasploit漏洞利用系列（一）：MSF完美升级及目录结构深度解读

在信息安全领域&#xff0c;MetasploitFramework&#xff08;MSF&#xff09;是一个无处不在的工具&#xff0c;它集合了大量的渗透测试和漏洞利用模块&#xff0c;帮助安全专家识别和利用系统中的弱点。本文将深入探讨如何对Metasploit进行完美升级&#xff0c;以及对其核心目…...

编程日记 2024/8/20 23:37:11

C/C++｜经典代码题（动态资源的双重释放与「按值传递、按引用传递、智能指针的使用」）

以下代码中你能看出其存在什么问题&#xff1f;如何修复&#xff0c;能给出几种方法&#xff1f;分别在什么场景下用哪种方法。 #include <iostream>class Buffer {public:Buffer() { std::cout << "Buffer created" << std::endl; }~Buffer() { s…...

编程日记 2024/8/20 23:36:10

西北乱跑娃 -- linux使用笔记

1.后台运行每天一个日志文件 nohup python3.8 manage.py >> $(date %Y-%m-%d).log 2>&1 &2.目录操作&#xff1a; ls&#xff1a;列出目录内容。cd&#xff1a;改变当前工作目录。pwd&#xff1a;显示当前工作目录的路径。mkdir&#xff1a;创建新目录。rmd…...

编程日记 2024/8/20 23:34:07

Kubectl基础命令使用

一.Kubectl 基础命令 格式&#xff1a; kubectl [command] [TYPE] [NAME] [FLAGS] kubectl 是 Kubernetes 的命令行工具&#xff0c;用于管理 Kubernetes 集群。以下是一些常用的 kubectl 命令及其选项&#xff1a; 常用命令 获取资源 列出所有资源类型&#xff08;Pods、De…...

编程日记 2024/8/20 23:31:04

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/9/19 2:07:13

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/9/16 2:11:19

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/8/26 0:20:55

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/9/13 17:39:30

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/9/4 9:53:24

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/8/1 4:58:46