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

目录

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': '' },},},*/},
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/404948.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机毕业设计选什么题目好？ springboot java沉浸式戏曲文化体验系统

计算机毕业设计选什么题目好？ springboot java沉浸式戏曲文化体验系统

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
【生物特征识别论文分享】基于深度学习的掌纹掌静脉识别

【生物特征识别论文分享】基于深度学习的掌纹掌静脉识别

&#xff08;待更新&#xff09;基于深度学习的生物特征识别&#xff08;手掌静脉、手背静脉、手指静脉、掌纹、人脸等&#xff09;论文模型总结 。具体方法包括&#xff1a;基于特征表征、基于传统网络设计与优化、基于轻量级网络设计与优化、基于Transformer设计与优化、基于…
阅读更多...
ES与MySQL数据同步实现方式

ES与MySQL数据同步实现方式

1.什么是数据同步: 1.Elasticsearch中的酒店数据来自于mysql数据库&#xff0c;因此mysql数据发生改变时&#xff0c;Elasticsearch也必须跟着改变&#xff0c;这个就是Elasticsearch与mysql之间的数据同步 2.数据同步实现方式&#xff1a; 常见的数据同步方案有三种&#x…
阅读更多...
7.2 算法设计与分析

7.2 算法设计与分析

分治法&#xff08;考的概率较低&#xff09; 回溯法&#xff08;考的概率较低&#xff09; 动态规划法&#xff08;考的概率较高&#xff09; 1
阅读更多...
Python 办公自动化 处理 Excel 数据 【1】推荐

Python 办公自动化 处理 Excel 数据 【1】推荐

话说学好办公自动化,走遍天下都不怕&#xff01;&#xff01;&#xff01; 好的&#xff0c;现在开始。 因为是一些办公自动化的应用场景&#xff0c;所以需要电脑支持excel、word和ppt以及python的运行环境。 如果有电脑不支持Excel word ppt的以及python环境下载安装配置可…
阅读更多...
交通感知与车路协同系统-计算机毕设Java|springboot实战项目

交通感知与车路协同系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…
阅读更多...
QT：事件机制

QT：事件机制

一、事件机制 qt的核心机制&#xff1a;对象树、信号和槽、事件机制 1.1概念 就是当这件事情发生时&#xff0c;自动执行对应的功能代码。该某块功能代码是虚函数&#xff0c;只需重写该虚函数&#xff0c;即可执行重写的代码。 1.2事件处理简介 1. 什么是事件&#xff1f; (重…
阅读更多...
【教学类-76-01】20240820书包01（图案最大化）

【教学类-76-01】20240820书包01（图案最大化）

背景需求 通义万相生成图片&#xff0c;把图案最大化的方法&#xff08;切掉白边&#xff09; 【教学类-75-01】20240817“通义万相图片最大化透明png”的修图流程-CSDN博客文章浏览阅读1.6k次&#xff0c;点赞56次&#xff0c;收藏17次。【教学类-75-01】20240817“通义万相…
阅读更多...
【Android 笔记】记移植OpenCV4.8图像人脸识别

【Android 笔记】记移植OpenCV4.8图像人脸识别

前言 因业务需要&#xff0c;使用大屏端摄像头捕获图像&#xff0c;且要识别图像中人脸的数目以及从中随机抽取一人。 业务流程如下&#xff0c;调用摄像头预览、拍照&#xff0c;使用OpenCV库进行人脸识别&#xff0c;将识别到的人脸使用矩形框绘制出来&#xff0c;从识别的人…
阅读更多...
【秋招笔试】8.18大疆秋招(第三套)-三语言题解

【秋招笔试】8.18大疆秋招(第三套)-三语言题解

🍭 大家好这里是 春秋招笔试突围，一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 ｜ 编程一对一辅导 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍒 本专栏已收…
阅读更多...
STM32CubeMX 配置串口通信 HAL库

STM32CubeMX 配置串口通信 HAL库

一、STM32CubeMX 配置串口 每个外设生成独立的 ’.c/.h’ 文件 不勾&#xff1a;所有初始化代码都生成在 main.c 勾选&#xff1a;初始化代码生成在对应的外设文件。 如 GPIO 初始化代码生成在 gpio.c 中。 二、重写fputc函数 ​ #include <stdio.h>#ifdef __GNUC__#def…
阅读更多...
无人机之固定翼无人机的组成

无人机之固定翼无人机的组成

固定翼无人机是根据空气动力学原理设计机翼的形状&#xff0c;靠动力装置产生推力或者拉力&#xff0c;使无人机获得一定速度后&#xff0c;会导致空气在飞机上下表面的压力不同&#xff0c;进而产生升力&#xff0c;其升力主要来源于固定的机翼。大多数都是由机翼、机身、尾翼…
阅读更多...
FastHTML：使用 Python 彻底改变 Web 开发

FastHTML：使用 Python 彻底改变 Web 开发

什么是 FastHTML&#xff1f;&#x1f310; FastHTML 是一个现代 Python Web 应用程序框架&#xff0c;其真正目的是让 Python 开发人员轻松进行 Web 开发。它大大减少了对 JavaScript 和 CSS 构建交互式和可扩展 Web 应用程序的依赖。FastHTML 通过使用 Python 对象来表示 HTM…
阅读更多...
python 捕获异常

python 捕获异常

捕获指定异常 e 是保存的异常信息 捕获多个异常
阅读更多...
全国大学生数学建模比赛——时间序列（详细解读）

全国大学生数学建模比赛——时间序列（详细解读）

全国大学生数学建模比赛中&#xff0c;时间序列分析是一种重要的方法。以下是对时间序列在该比赛中的详细解读&#xff1a; 一、时间序列的概念 时间序列是按时间顺序排列的一组数据。在数学建模中&#xff0c;时间序列数据通常反映了某个现象随时间的变化情况。例如&#xf…
阅读更多...
使用vs配置opencv环境（属性表方法）

使用vs配置opencv环境（属性表方法）

opencv官网&#xff1a;https://opencv.org/releases/ 老手回忆&#xff08;新建属性表&#xff09; Step1: 安装VS&#xff0c;安装openCV Step2: 新建项目&#xff0c;新建项目属性表&#xff0c;debug|x64新建属性&#xff0c;命好名字 Step3: VC目录-包含目录中添加: 安装…
阅读更多...
经典游戏，用java实现的坦克大战小游戏

经典游戏，用java实现的坦克大战小游戏

今天给大家分享一个使用java编写的坦克大战小游戏&#xff0c;整体还是挺好玩的&#xff0c;通过对这款游戏的简单实现&#xff0c;加深对java基础的深刻理解。 一、设计思路 1.坦克大战小游戏通过java实现&#xff0c;其第一步需要先绘制每一关对应的地图&#xff0c;地图包括…
阅读更多...
WPF中RenderTransform，LayoutTransform区别

WPF中RenderTransform，LayoutTransform区别

RenderTransform RenderTransform 是在渲染阶段应用的变换。它不会影响控件的布局&#xff0c;只会影响控件的外观。常用于动画和视觉效果。 • 应用时机&#xff1a;在控件已经完成布局之后。 • 影响范围&#xff1a;仅影响控件的外观&#xff0c;不影响布局。 • 常见用途&…
阅读更多...
探索 HarmonyOS 的层叠布局：灵活的 Stack 容器

探索 HarmonyOS 的层叠布局：灵活的 Stack 容器

在应用开发中&#xff0c;灵活的布局设计是提高用户体验的关键之一。HarmonyOS 提供了丰富的布局组件&#xff0c;其中层叠布局&#xff08;Stack Layout&#xff09;是一个强大的工具&#xff0c;可以帮助开发者轻松实现元素的重叠显示。本文将深入探讨 Stack 容器的功能和应用…
阅读更多...
【设计模式】六大原则-下

【设计模式】六大原则-下

❓首先什么是设计模式&#xff1f; &#x1f635;相信刚上大学的你和我一样&#xff0c;在学习这门课的时候根本不了解这些设计原则和模式有什么用处&#xff0c;反而不如隔壁的C更有意思&#xff0c;至少还能弹出一个小黑框&#xff0c;给我个hello world。 ✨ 如何你和我一样…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023