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

【前端】几种常见的跨域解决方案代理的概念

几种常见的跨域解决方案&代理的概念

  • 一、常见的跨域解决方案
    • 1. 服务端配置CORS(Cross-Origin Resource Sharing):
    • 2. Nginx代理
    • 3. Vue CLI配置代理:
    • 4 .uni-app在`manifest.json`中配置代理来解决:
    • 5. 使用WebSocket通讯
    • 6. H5跨域 JSONP方式(通过script标签)
    • 7. 去掉www前缀
    • 8. Chrome浏览器的跨域设置(适用于本地临时跨域调试)
  • 二、代理的概念


在 Web 开发中,跨域问题是指浏览器从一个域名的网页去请求另一个域名的资源时,由于同源策略的限制,请求会被阻止。
解决跨域问题需要可能从后端、中间件、前端等方向入手。

一、常见的跨域解决方案

1. 服务端配置CORS(Cross-Origin Resource Sharing):

通过在服务器端设置响应头Access-Control-Allow-Origin来允许特定源的跨域请求。
支持多种HTTP方法,如GET、POST、PUT、DELETE等。
示例代码(PHP):

header('Access-Control-Allow-Origin: *');

2. Nginx代理

使用 Nginx 设置代理解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器,接收来自前端的请求并将其转发到实际的后端 API 服务,从而避免跨域问题。

  1. 在服务器上安装 Nginx
    使用以下命令安装Nginx:

    • Ubuntu/Debian:

      sudo apt update
      sudo apt install nginx
      
    • CentOS/RHEL:

      sudo yum install nginx
      
  2. 配置 Nginx 代理

    打开 Nginx 的配置文件,通常是在 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/default,根据你的操作系统和 Nginx 安装方式来决定。

    下面是一个示例配置,假设你的前端应用在 http://localhost:8080,后端 API 服务在 http://api.example.com

    server {listen 80;# 前端应用访问的地址server_name localhost;# 代理:`http://localhost`→`http://example.com`location / {root /var/www/html;  # 指定前端应用的根目录index index.html index.htm;}# 反向代理:分发到不同的后端 API 服务location /api/ {proxy_pass http://api.example.com/;  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;}location /websocket/ {proxy_pass http://websocket.example.com/;  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://api.example.com/;: 将所有 /api/ 路径的请求转发到 http://api.example.com
    • proxy_set_header 相关指令用于转发客户端的请求头信息到后端服务器,这样后端可以获得真实的请求信息。
  3. 重载 Nginx 配置
    在修改 Nginx 配置文件后,需要重载 Nginx,使配置生效:

    sudo nginx -s reload
    
  4. CORS 头部:如果后端已经配置了 CORS 头部,那么你可以在 Nginx 上的代理配置中添加相关的 CORS 头部,或者在后端服务中处理:

location /api/ {proxy_pass http://api.example.com/;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;# CORS 头部add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
}
  1. 路径重写:有时需要在代理时对路径进行重写。例如,前端请求 /api,但后端实际接收的路径是 /v1/api,这时可以使用 rewrite 来修改请求路径:
location /api/ {rewrite ^/api/(.*)$ /v1/$1 break;proxy_pass http://api.example.com/;
}

3. Vue CLI配置代理:

module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:8818’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ‘’ }
}
}
}
};

4 .uni-app在manifest.json中配置代理来解决:

针对uni-app框架 有专门的配置方法。

"h5": {"devServer": {"https": false,"port": 8080,"proxy": {"/apis": {"target": "https://www.ucharts.cn","changeOrigin": true,"pathRewrite": {"^/apis": ""}}}}
}

这将把以/apis开头的请求代理到https://www.ucharts.cn,从而解决跨域问题。

5. 使用WebSocket通讯

传统的 HTTP 请求会受到同源策略的严格约束,而 Websocket 协议不受同源策略的限制。WebSocket通过“ws://"(非加密)或“wss://”(加密)协议进行通信,连接建立后,全双工通信得以实现,并且不遵循 HTTP 的同源策略。

6. H5跨域 JSONP方式(通过script标签)

JSONP(JSON with Padding)是一种古老的跨域解决方案
原理是利用< script >标签的src属性不受同源策略限制的特点。
适用于GET请求,不适用于POST等其他类型请求。

<!DOCTYPE html> 
<html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP跨域示例</title> 
</head> <body> <script> function jsonpCallback(data) { console.log(data);  } </script> <script src="http://目标服务器地址?callback=jsonpCallback"></script> 
</body> </html> 

这里http://目标服务器地址是提供数据的服务器地址,callback=jsonpCallback是将回调函数名作为参数传递给服务器,服务器收到请求后,会将数据包装在回调函数中返回,例如返回的数据可能是jsonpCallback([{ "name": "张三", "age": 25 }]),这样前端页面就可以通过回调函数获取到跨域的数据。

7. 去掉www前缀

有些情况下,去掉访问地址的www前缀可能会解决跨域问题。这是因为有些服务器配置中,www子域名和主域名被视为不同的域。当去掉www前缀后,可能会使请求在同源策略下被允许。

例如,原本请求www.example.com会出现跨域问题,尝试访问example.com 可能就不会有跨域限制。但这种方法并不是通用的解决方案,它取决于服务器的具体配置,而且也可能带来一些其他问题,比如搜索引擎优化(SEO)方面的影响等。同时,如果是因为协议、端口不同导致的跨域,这种方法也无法解决。

8. Chrome浏览器的跨域设置(适用于本地临时跨域调试)

在开发过程中,可能需要临时绕过浏览器的同源策略——启动一个禁用Web安全策略的Chrome实例。
请注意,这种方法仅适用于开发环境,且存在安全风险,务必谨慎使用。
通过启动Chrome浏览器时添加特定参数来实现:

将谷歌浏览器的桌面快捷方式复制一份,右键属性将目标的路径后输入

--disable-web-security --disable-web-security --user-data-dir=C:\chromTest参数

参考:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-web-security --user-data-dir=C:\chromTest

在这里插入图片描述

二、代理的概念

常用的代理技术分为正向代理反向代理透明代理
正向代理:将多个不同域名的网站请求统一到一个目标服务器请求
反向代理:将多个不同域名的网站请求根据需要分发给不同的后端应用服务器
透明代理:一种网络中间件,它能够在用户不知情的情况下拦截和转发网络流量。这种代理不需要在用户端配置特定的代理设置,而是通过在网络层面拦截流量来实现代理功能。
在这里插入图片描述
在这里插入图片描述

相关文章:

【前端】几种常见的跨域解决方案代理的概念

几种常见的跨域解决方案&代理的概念 一、常见的跨域解决方案1. 服务端配置CORS&#xff08;Cross-Origin Resource Sharing&#xff09;&#xff1a;2. Nginx代理3. Vue CLI配置代理&#xff1a;4 .uni-app在manifest.json中配置代理来解决&#xff1a;5. 使用WebSocket通讯…...

C++之2048小游戏 第二期

不是&#xff0c;一天点赞就到15了&#xff1f;&#xff01;好吧&#xff0c;那我更新一下 1. 逻辑 &#xff08;真的有人会看吗&#xff1f;&#xff09; 注&#xff1a;本文1.1章为AI生成&#xff0c;如有错误欢迎在评论其指出&#xff01; 1.1 普通/最初逻辑 这里我们首…...

Redis7——基础篇(一)

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09; 一、Redis定义 官网地址&#xff1a;Redis - The Real-time Data Platform R…...

day9手机创意软件

趣味类 in:记录趣味生活&#xff08;通用&#xff09; 魔漫相机&#xff1a;真人变漫画&#xff08;通用&#xff09; 活照片&#xff1a;让照片活过来&#xff08;通用&#xff09; 画中画相机&#xff1a;与众不同的艺术 年龄检测仪&#xff1a;比一比谁更年轻&#xf…...

C# Dictionary的实现原理

在 C# 中&#xff0c;Dictionary<TKey, TValue> 是一个基于哈希表&#xff08;Hash Table&#xff09;实现的键值对集合。它提供了高效的插入、删除和查找操作&#xff0c;平均时间复杂度接近 O(1)。下面是 Dictionary 的核心实现原理&#xff1a; 1. Dictionary 的核心数…...

学习笔记-人脸识别相关编程基础

通过编程实现人脸识别功能&#xff0c;需要掌握一定的技术基础&#xff0c;包括编程语言、图像处理、机器学习以及相关的库和框架&#xff1a; 1. 编程语言 Python&#xff1a;Python 是实现人脸识别最常用的语言之一&#xff0c;因为它有大量的库和框架支持&#xff0c;如 Op…...

BUU37 [DASCTF X GFCTF 2024|四月开启第一局]web1234【代码审计/序列化/RCE】

Hint1&#xff1a;本题的 flag 不在环境变量中 Hint2&#xff1a;session_start&#xff08;&#xff09;&#xff0c;注意链子挖掘 题目&#xff1a; 扫描出来www.zip class.php <?phpclass Admin{public $Config;public function __construct($Config){//安全获取基…...

(五)Spring Boot学习——spring security +jwt使用(前后端分离模式)

一定要熟悉spring security原理和jwt无状态原理&#xff0c;理解了才知道代码作用。 在 Spring Security JWT 认证流程中&#xff0c;通常的做法是&#xff1a; 用户提交用户名和密码Spring Security 认证管理器 (AuthenticationManager) 进行认证如果认证成功&#xff0c;生…...

Java中使用EasyExcel

Java中使用EasyExcel 文章目录 Java中使用EasyExcel一&#xff1a;EasyExcel介绍1.1、核心函数导入数据导出数据 1.2、项目实际应用导入数据导出数据 1.3、相关注解ExcelProperty作用示例 二&#xff1a;EasyExcel使用2.1、导入功能2.2、导出功能 三&#xff1a;EasyExcel完整代…...

前沿科技改变生活新趋势

纳米技术在电子设备制造中的应用越来越广泛。这种技术能够帮助制造更小、更快、更耐用的电子产品。 举个例子&#xff0c;手机的处理器是其核心部件。随着纳米技术的进步&#xff0c;现在的处理器比以前小得多&#xff0c;但功能却更强。这样不仅让手机变得更轻薄&#xff0c;…...

不到一个月,SQLite 3.49.0来了

距离 SQLite 3.48.0 发布不到一个月&#xff0c;SQLite 开发团队于 2025 年 2 月 6 日发布了 SQLite 3.49.0 版本。这更新速度的确让人感动&#xff0c;那么这个版本又有哪些更新呢&#xff1f; 查询优化器 新版本改进了自动索引&#xff08;query-time index&#xff09;优化…...

Android车机DIY开发之软件篇(十四)编译i.mx8mplus官方kernel

1.下载 下载地址 2.安装依赖 sudo apt-get update sudo apt-get install build-essential git libncurses5-dev libssl-dev bc sudo apt-get install gcc-aarch64-linux-gnu export CROSS_COMPILEaarch64-linux-gnu- 3.配置 make ARCHarm64 defconfig 4.编译 make ARCHa…...

Mac上搭建宝塔环境并部署PHP项目

安装Docker Desktop》搭建Centos版本的宝塔环境》部署PHP项目 1. 下载Docker for mac 软件&#xff1a;https://www.docker.com/ 或使用终端命令&#xff1a;brew install --cask --appdir/Applications docker 2. 使用命令安装宝塔环境的centos7系统&#xff1a; docker pul…...

3.3.3 VO-O语法- 语法算子(二)

循环遍历 由于VO语言是面向数据集的&#xff0c;其所有隐含的语义中都已经带有了遍历并计算的数据逻辑。因此&#xff0c;VO语言只提供了一种支持循环语法的算子--Loop算子。 Loop算子 Loop算子是一个容器算子&#xff0c;其可以实现对其内部子流程的循环迭代运行。但Loop算…...

安装 Ollama 需要哪些步骤?(windows+mac+linux+二进制+Docker)

安装 Ollama 的步骤根据操作系统不同会有所差异,以下是针对不同操作系统的详细安装指南: Windows 系统 下载安装包:访问 Ollama 官方下载页面,下载适用于 Windows 的安装程序 OllamaSetup.exe。运行安装程序:双击下载的安装包,按照提示完成安装。默认安装路径为 C:\User…...

HCIA项目实践--静态路由的综合实验

八 静态路由综合实验 &#xff08;1&#xff09;划分网段 # 192.168.1.0 24#分析&#xff1a;每个路由器存在两个环回接口&#xff0c;可以把两个环回接口分配一个环回地址&#xff0c;所以是四个环回&#xff0c;一个骨干&#xff0c;这样分配&#xff0c;不会出现路由黑洞#19…...

Electron视图进程和主进程通讯

快速创建基于vue的electron项目&#xff1a;quick-start/create-electron - npm 视图线程也就index.html是无法直接访问这个api的&#xff08;如果没有开启视图层访问nodejs的功能&#xff0c;现在几乎没法直接开启&#xff0c;开启了一堆警告提示&#xff09; 所以需要通过r…...

Vript-Hard——一个基于高分辨率和详细字幕的视频理解算法

一、概述 多模态学习的最新进展促进了对视频理解和生成模型的研究。随之而来的是&#xff0c;对高分辨率视频和详细说明所建立的高质量数据集的需求激增。然而&#xff0c;由于时间因素的影响&#xff0c;视频与文本的配对不像图像那样容易。准备视频和文本配对是一项困难得多…...

react脚手架搭建react项目使用scss

1.create-react-app 创建的项目&#xff0c;webpack配置默认是隐藏的 &#xff0c;如果要查看 或修改用npm run eject命令,因为create-react-app脚手架默认已经配置了scss、sass所以不用改webpack配置。如果用less 就需要自己添加配置 2.如果直接使用scss的文件会直接报错&…...

Vue.js 状态管理库Pinia

Pinia Pinia &#xff1a;Vue.js 状态管理库Pinia持久化插件-persist Pinia &#xff1a;Vue.js 状态管理库 Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。 要使用Pinia &#xff0c;先要安装npm install pinia在main.js中导入Pinia 并使用 示例…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...