【前端】几种常见的跨域解决方案
在前端开发中,跨域问题是常见的挑战。以下是几种常见的跨域解决方案:
1. Nginx反向代理
使用 Nginx 进行反向代理是解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器,接收来自前端的请求并将其转发到实际的后端 API 服务,从而避免跨域问题。
-
安装 Nginx
如果你还没有安装 Nginx,可以使用以下命令安装:-
Ubuntu/Debian:
sudo apt update sudo apt install nginx
-
CentOS/RHEL:
sudo yum install nginx
-
-
配置 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;location / {root /var/www/html; # 指定前端应用的根目录index index.html index.htm;}# 配置反向代理location /api/ {proxy_pass http://api.example.com/; # 反向代理到后端 API 服务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
相关指令用于转发客户端的请求头信息到后端服务器,这样后端可以获得真实的请求信息。
-
重载 Nginx 配置
在修改 Nginx 配置文件后,需要重载 Nginx,使配置生效:sudo nginx -s reload
当前端应用请求 http://localhost/api/xyz
时,Nginx 会将这个请求转发到 http://api.example.com/api/xyz
,并将响应返回给前端。
注意事项
-
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'; }
-
路径重写:有时需要在代理时对路径进行重写。例如,前端请求
/api
,但后端实际接收的路径是/v1/api
,这时可以使用rewrite
来修改请求路径:location /api/ {rewrite ^/api/(.*)$ /v1/$1 break;proxy_pass http://api.example.com/; }
2. H5跨域 JSONP方式(通过script标签)
JSONP(JSON with Padding)是一种古老的跨域解决方案。原理是利用
<!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 }]),这样前端页面就可以通过回调函数获取到跨域的数据。
3 .uni-app在manifest.json
中配置代理来解决:
"h5": {"devServer": {"https": false,"port": 8080,"proxy": {"/apis": {"target": "https://www.ucharts.cn","changeOrigin": true,"pathRewrite": {"^/apis": ""}}}}
}
这将把以/apis
开头的请求代理到https://www.ucharts.cn
,从而解决跨域问题。
4. 去掉www前缀
有些情况下,去掉访问地址的www前缀可能会解决跨域问题。这是因为有些服务器配置中,www子域名和主域名被视为不同的域。当去掉www前缀后,可能会使请求在同源策略下被允许。
例如,原本请求www.example.com 会出现跨域问题,尝试访问example.com 可能就不会有跨域限制。但这种方法并不是通用的解决方案,它取决于服务器的具体配置,而且也可能带来一些其他问题,比如搜索引擎优化(SEO)方面的影响等。同时,如果是因为协议、端口不同导致的跨域,这种方法也无法解决。
5. Chrome浏览器的跨域设置(适用于本地临时跨域)
在开发过程中,可能需要临时绕过浏览器的同源策略。可以通过启动Chrome浏览器时添加特定参数来实现:
将谷歌浏览器的桌面快捷方式复制一份,右键属性将**目标(T)😗*的路径后输入–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
这将启动一个禁用Web安全策略的Chrome实例。请注意,这种方法仅适用于开发环境,且存在安全风险,务必谨慎使用。
相关文章:

【前端】几种常见的跨域解决方案
在前端开发中,跨域问题是常见的挑战。以下是几种常见的跨域解决方案: 1. Nginx反向代理 使用 Nginx 进行反向代理是解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器,接收来自前端的请求并将其转发到实际的后端 API 服务&#…...
如何在WinForms应用程序中读取和写入App.config文件
如何在WinForms应用程序中读取和写入App.config文件 1. 添加App.config文件2. 配置App.config3. 读取App.config4. 写入App.config 在WinForms应用程序中, App.config文件是用于存储配置数据的标准方式。通过使用.NET框架提供的类库,我们可以方便地对 …...

【分布式理论7】分布式调用之:服务间的(RPC)远程调用
文章目录 一、RPC 调用过程二、RPC 动态代理:屏蔽远程通讯细节1. 动态代理示例2. 如何将动态代理应用于 RPC 三、RPC序列化与协议编码1. RPC 序列化2. RPC 协议编码2.1. 协议编码的作用2.2. RPC 协议消息组成 四、RPC 网络传输1. 网络传输流程2. 关键优化点 一、RPC…...
人工智能应用-智能驾驶精确的目标检测和更高级的路径规划
实现更精确的目标检测和更高级的路径规划策略是自动驾驶领域的核心任务。以下是一个简化的示例,展示如何使用Python和常见的AI库(如TensorFlow、OpenCV和A*算法)来实现这些功能。 1. 环境准备 首先,确保安装了以下库:…...
dynamic_cast和static_cast和const_cast
dynamic_cast 在 C 中的作用 dynamic_cast 是 C 运行时类型转换(RTTI, Run-Time Type Identification)的一部分,主要用于: 安全的多态类型转换检查类型的有效性向下转换(Downcasting)跨类层次的指针或引用…...

DEEPSEEK与GPT等AI技术在机床数据采集与数字化转型中的应用与影响
随着人工智能(AI)技术的迅猛发展,深度学习、自然语言处理等先进技术开始广泛应用于各行各业。在制造业尤其是机床行业,AI技术的融合带来了巨大的变革,尤其在机床数据采集与机床数字化方面的应用。本文将探讨DEEPSEEK、…...
高速存储文章目录
《zynq tcp万兆网和ftp协议分析-CSDN博客》 《国产fpga nvme ip高速存储方案设计_fpga 高速存储-CSDN博客》 《国微pcie switch 8748高速存储方案设计_国产pcie switch-CSDN博客》 《FPGA SATA高速存储设计-CSDN博客》 《FPGA NVME高速存储设计_690t fpga-CSDN博客》 《zy…...

车载测试工具 --- CANoe VH6501 进行Not Acknowledge (NAck) 测试
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...

【清晰教程】通过Docker为本地DeepSeek-r1部署WebUI界面
【清晰教程】本地部署DeepSeek-r1模型-CSDN博客 目录 安装Docker 配置&检查 Open WebUI 部署Open WebUI 安装Docker 完成本地DeepSeek-r1的部署后【清晰教程】本地部署DeepSeek-r1模型-CSDN博客,通过Docker为本地DeepSeek-r1部署WebUI界面。 访问Docker官…...
Linux运维——用户管理
Linux用户管理 一、Linux用户管理要点二、常用命令2.1、groupadd2.2、groupdel2.3、groupmod2.4、groups2.5、useradd2.6、userdel2.7、passwd2.9、su2.10、sudo2.10.1、给普通用户授权 sudo2.10.2、 免密码授权 sudo 一、Linux用户管理要点 创建用户组 - 使用 groupadd删除用…...

mac下dify+deepseek部署,实现私人知识库
目前deepseek 十分火爆,本地部署实现私有知识库,帮助自己日常工作,上一篇使用工具cherry studio可以做到私人知识库。今天学习了一下,使用Dify链接deepseek,实现私人知识库,也非常不错,这里分享…...
Linux中设置开机运行指令
系统:Debian 12 使用systemd来设置开机自启动脚本或命令是一个更加现代且推荐的方法。下面是具体的步骤: 创建守护脚本 首先,你需要创建一个Shell脚本文件,比如mydaemon.sh,并在其中编写你的守护脚本逻辑。确保这个脚…...
IDEA中列举的是否是SpringBoot的依赖项的全部?在哪里能查到所有依赖项,如何开发自己的依赖项让别人使用
在 IntelliJ IDEA 中列举的依赖项并不一定是 Spring Boot 项目的全部依赖项。IDEA 通常只显示你在 pom.xml(Maven)或 build.gradle(Gradle)中显式声明的依赖项,而这些依赖项本身可能还会引入其他传递性依赖。 1. 如何…...
Ollama命令使用指南
Ollama 命令使用指南 Ollama 命令使用指南1. Ollama 命令概览2. Ollama 命令详解2.1 启动 Ollama2.2 创建模型2.3 查看模型信息2.4 运行模型2.5 停止运行的模型2.6 从注册表拉取模型2.7 推送模型到注册表2.8 列出本地模型2.9 查看正在运行的模型2.10 复制模型2.11 删除模型 3. …...

LIMO:上海交大的工作 “少即是多” LLM 推理
25年2月来自上海交大、SII 和 GAIR 的论文“LIMO: Less is More for Reasoning”。 一个挑战是在大语言模型(LLM)中的复杂推理。虽然传统观点认为复杂的推理任务需要大量的训练数据(通常超过 100,000 个示例),但本文展…...

Android studio怎么创建assets目录
在Android Studio中创建assets文件夹是一个简单的步骤,通常用于存储不需要编译的资源文件,如文本文件、图片、音频等 main文件夹,邮件new->folder-assets folder...
常见的前端框架和库有哪些
1. React 描述:由 Facebook 开发的一个 JavaScript 库,用于构建用户界面,尤其是单页面应用(SPA)。特点: 基于组件的架构,便于重用 UI 组件。使用虚拟 DOM 提升性能。容易与其他库和框架集成。 …...

【批量获取图片信息】批量获取图片尺寸、海拔、分辨率、GPS经纬度、面积、位深度、等图片属性里的详细信息,提取出来后导出表格,基于WPF的详细解决方案
摄影工作室通常会有大量的图片素材,在进行图片整理和分类时,需要知道每张图片的尺寸、分辨率、GPS 经纬度(如果拍摄时记录了)等信息,以便更好地管理图片资源,比如根据图片尺寸和分辨率决定哪些图片适合用于…...

数据结构与算法(test3)
七、查找 1. 看图填空 查找表是由同一类型的数据元素(或记录)构成的集合。例如上图就是一个查找表。 期中(1)是______________. (2)是______________(3)是_____关键字_______。 2. 查找(Searching) 就是根据给定的某个值, 在查…...

基于Python的人工智能驱动基因组变异算法:设计与应用(下)
3.3.2 数据清洗与预处理 在基因组变异分析中,原始数据往往包含各种噪声和不完整信息,数据清洗与预处理是确保分析结果准确性和可靠性的关键步骤。通过 Python 的相关库和工具,可以有效地去除噪声、填补缺失值、标准化数据等,为后续的分析提供高质量的数据基础。 在基因组…...

Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...