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

常见的浏览器跨域解决方法

news 2025/8/5 9:37:15

1. 前端方法：JSONP（仅适用于GET请求）

JSONP（JSON with Padding）是一种利用<script>标签的src属性不受同源策略限制的特性来实现跨域数据请求的方法。JSONP通过在前端动态创建<script>标签，并将请求的URL设置为需要跨域访问的API地址，来获取跨域数据。

前端代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSONP Example</title>
</head>
<body><script>function handleResponse(data) {console.log(data); // 处理返回的JSON数据}// 动态创建script标签var script = document.createElement('script');script.src = 'http://example.com/api?callback=handleResponse';document.body.appendChild(script);
</script></body>
</html>

后端代码示例（Node.js使用Express）：

const express = require('express');
const app = express();
const port = 3000;app.get('/api', (req, res) => {const callback = req.query.callback; // 获取前端传递的回调函数名const data = { message: 'Hello, JSONP!' }; // 要返回的数据// 构建JSONP格式的响应res.send(`${callback}(${JSON.stringify(data)})`);
});app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

2. 后端方法：CORS（跨来源资源共享）

CORS是一种W3C规范，它允许浏览器向跨源服务器发出XMLHttpRequest请求。要实现CORS，后端服务器需要在响应头中设置相应的CORS头部。

前端代码示例：

// 使用Fetch API发送请求
fetch('http://example.com/api', {method: 'GET',mode: 'cors', // 表明这是一个跨域请求headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端代码示例（Node.js使用Express）：

const express = require('express');
const app = express();
const port = 3000;// 使用CORS中间件
const cors = require('cors');
app.use(cors()); // 允许所有来源的跨域请求app.get('/api', (req, res) => {const data = { message: 'Hello, CORS!' };res.json(data);
});app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

在上面的后端示例中，我们使用了cors中间件来简化CORS头部的设置。这个中间件可以配置来允许特定来源的请求，或者使用通配符*来允许所有来源的请求。

3. 前端配置代理（Proxy）

在Web开发中，使用webpack的devServer配置代理是一种常见的方法来解决跨域问题，特别是在开发环境中。webpack-dev-server提供了一个proxy选项，允许你指定一些规则来将特定的请求代理到另一个服务器。
以下是如何在webpack的devServer配置中使用proxy来解决跨域问题的示例：

首先，确保你已经安装了webpack和webpack-dev-server。如果没有，你可以通过npm或yarn来安装它们：

npm install --save-dev webpack webpack-dev-server
# 或者
yarn add --dev webpack webpack-dev-server

然后，在你的webpack配置文件（通常是webpack.config.js或webpack.dev.js）中，添加devServer字段，并在其中配置proxy选项：

const path = require('path');module.exports = {// ...其他webpack配置...devServer: {contentBase: path.join(__dirname, 'dist'), // 静态文件目录compress: true, // 开启gzip压缩port: 9000, // 端口号proxy: {// 选项写法'/api': {target: 'http://example.com', // 目标地址ws: true, // 是否启用websocketschangeOrigin: true, // 开启代理，在本地创建一个虚拟服务器，然后发送请求的数据，会同时会收到请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: {'^/api': '' // 路径重写，移除路径中的/api},router: {// 当请求不匹配任何代理规则时，请求会到达这个路由'/': 'http://example.com'}},// 简写选项'/foo': 'http://example.com'}}
};

在上面的配置中，所有以/api开头的请求都会被代理到http://example.com。changeOrigin选项设置为true，这样代理就会改变请求头中的Origin，确保它与目标服务器的Origin一致，从而避免CORS问题。pathRewrite选项用于重写请求路径，移除/api前缀。

现在，当你运行webpack-dev-server时（通常是通过npx webpack serve或npm run serve等命令），任何发送到/api的请求都会被代理到http://example.com，而浏览器不会遇到跨域问题。

请确保将target的值替换为你想要代理的实际API服务器的地址。此外，根据你的需要，你可能还需要调整其他代理选项，如ws（用于WebSockets）、pathRewrite、router等。

4. 代理服务器：

代理服务器是一个位于客户端和目标服务器之间的中间服务器。客户端的请求首先发送到代理服务器，然后由代理服务器转发到目标服务器。代理服务器可以在不同的域中运行，因此它可以绕过浏览器的同源策略限制。前端向代理服务器发送请求，代理服务器再向目标服务器发送请求，并将结果返回给前端。这种方法不需要修改前端或目标服务器的代码。

5. WebSockets：

WebSocket是一种网络通信协议，它允许在用户的浏览器和服务器之间建立一条持久的连接。与HTTP不同，WebSocket连接不受同源策略的限制，因此可以用来解决跨域问题。然而，需要注意的是，并非所有服务器都支持WebSocket，并且它可能不适用于所有类型的跨域通信。

6. 反向代理：

反向代理服务器通常部署在网站的前端，用于接收客户端的请求，然后将这些请求转发给后端服务器。由于反向代理服务器与客户端处于同一域下，它可以绕过同源策略限制，将跨域请求转发给后端服务器。这种方法需要配置服务器端的反向代理软件，如Nginx或HAProxy。

7. 浏览器插件或扩展：

一些浏览器插件或扩展可以修改浏览器的行为，以允许跨域请求。然而，这种方法并不推荐在生产环境中使用，因为它依赖于用户的浏览器设置和安装的插件，不可控因素较多。

8. 修改浏览器设置：

在某些情况下，可以通过修改浏览器的设置来允许跨域请求。例如，在Chrome浏览器中，可以启动开发者模式并禁用同源策略。然而，这种方法仅适用于开发和测试环境，不建议在生产环境中使用。

9. 使用CDN：

通过内容分发网络（CDN）来解决跨域问题。CDN可以将资源缓存在不同的域名下，前端可以通过CDN的地址来加载资源，从而绕过同源策略限制。

注意事项

JSONP只能用于GET请求，因为它基于<script>标签的src属性。
CORS是一种更现代、更灵活的方法，支持所有类型的HTTP请求。
前后端需要协作来解决跨域问题，前端负责发起请求，后端负责配置CORS头部来允许跨域请求。
在生产环境中，后端应该仔细配置CORS策略，只允许可信的源进行跨域请求，以增强系统的安全性。

常见的浏览器跨域解决方法

1. 前端方法：JSONP（仅适用于GET请求） JSONP（JSON with Padding）是一种利用<script>标签的src属性不受同源策略限制的特性来实现跨域数据请求的方法。JSONP通过在前端动态创建<script>标签，并将…...

编程日记 2024/3/5 4:43:23

飞桨模型转ONNX模型教程

文章目录飞桨模型转ONNX模型教程1. ONNX简介2. Paddle2ONNX安装3. 获取Paddle2ONNX模型库4. 飞桨转ONNX教程4.1 飞桨训练模型导出为ONNX模型4.2 飞桨部署模型转为ONNX模型4.3 验证ONNX模型4.4 使用ONNX模型进行推理 5. 注意事项飞桨模型转ONNX模型教程 1. ONNX简介 ONNX是一…...

编程日记 2024/3/5 4:39:19

vue使用swiper（轮播图）-真实项目使用

一、安装我直接安装的vue-awesome-swiper": "^3.1.3"指定版本 npm install vue-awesome-swiper3.1.3 swiper --save二、vue页面使用，写了一个小demo <template><div class"vue-swiper"><h1>{{ msg }}</h1><…...

编程日记 2024/3/5 4:37:16

C++ 创建并初始化对象

创建并初始化C对象当我们创建一个C对象时，它需要占用一些内存，即使我们写一个完全为空的类，类中没有成员，什么也没有，它至少也要占用一个字节的内存。但是我们类中有很多成员，它们需要存储在某地方&#…...

编程日记 2024/3/5 4:35:13

import pandas as pd import matplotlib.pyplot as plt# 设置中文改写字体 plt.rcParams[font.sans-serif] [SimHei]# 读取数据 data pd.read_csv(C:/Users/wzf/Desktop/读取数据进行数据可视化练习/实训作业练习/瓜果类单位面积产量.csv ,encoding utf-8)#输出 print(data)…...

编程日记 2024/3/5 4:34:12

Java底层自学大纲_分布式篇

分布式专题_自学大纲所属类别学习主题建议课时（h）A 分布式锁001 Zookeeper实现分布式锁l-常规实现方式2.5A 分布式锁002 Zookeeper实现分布式锁II-续命&超时&羊群效应问题解决方案2.5A 分布式锁003 Zookeeper实现分布式锁III-基于Curator框架实现…...

编程日记 2024/3/5 4:33:11

Thread多线程(创建，方法，安全，通信，线程池，并发，并行，线程的生命周期)【全详解】

目录 1.多线程概述 2.多线程的创建 3.Thread的常用方法 4.线程安全 5.线程同步 6.线程通信 7.线程池 8.其它细节知识：并发、并行 9.其它细节知识：线程的生命周期 1.多线程概述线程是什么？ 线程(Thread)是一个程序内部的一条执行…...

编程日记 2024/3/5 4:31:09

自定义View中的ListView和ScrollView嵌套的问题

当我们在使用到ScrollView和ListView的时候可能会出现显示不全的问题。那我们可以进行以下分析 ScrollView在测量子布局的时候会用UNSPECIFIED。通过源码观察， 在ScrollView的onMeasure方法中 Overrideprotected void onMeasure(int widthMeasureSpec, int heightMe…...

编程日记 2024/3/5 4:30:08

支持向量机 SVM | 线性可分：硬间隔模型公式推导

目录一. SVM的优越性二. SVM算法推导小节概念在开始讲述SVM算法之前，我们先来看一段定义： 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法，支持线性分类和非线性分类的分类应用，同时通过OvR或者OvO的方式可以应用…...

编程日记 2024/3/5 4:28:06

【Unity实战】UGUI和Z轴排序那点事儿

如果读者是从Unity 4.x时代过来的，可能都用过NGUI这个插件（后来也是土匪成了正规军），NGUI一大特点是可以靠transform位移的Z值进行遮挡排序，然而这个事情在UGUI成了难题（Sorting Layer、Inspector顺序等因素…...

编程日记 2024/3/5 4:27:04

Vue/React 前端高频面试

说一说vue钩子函数钩子函数是Vue实例创建和销毁过程中自动执行的函数。按照组件生命周期的过程分为：挂载阶段 -> 更新阶段 -> 销毁阶段。每个阶段对应的钩子函数分别为：挂载阶段（beforeCreate，created，befor…...

编程日记 2024/3/5 4:26:02

[技巧]Arcgis之图斑四至范围批量计算

ArcGIS图层（点、线、面三类图形）四至范围计算例外一篇介绍：[技巧]Arcgis之图斑四至点批量计算说明：如下图画出来的框（范围标记不是很准） ，图斑的x最大和x最小，y最大，…...

编程日记 2024/3/5 4:25:01

C/C++工程师面试题（STL篇）

STL 中有哪些常见的容器 STL 中容器分为顺序容器、关联式容器、容器适配器三种类型，三种类型容器特性分别如下： 1. 顺序容器容器并非排序的，元素的插入位置同元素的值无关，包含 vector、deque、list vector：动态数组…...

编程日记 2024/3/5 4:24:00

Effective Programming 学习笔记

1 基本语句 1.1 断言在南溪看来，断言可以用来有效地确定编程中当前代码运行的前置条件，尤其是以下情况： 第三方工具库对输入数据的依赖，例如：minitouch库对Android版本的要求...

编程日记 2024/3/5 4:22:59

【MGR】MySQL Group Replication 背景

目录 17.1 Group Replication Background 17.1.1 Replication Technologies 17.1.1.1 Primary-Secondary Replication 17.1.1.2 Group Replication 17.1.2 Group Replication Use Cases 17.1.2.1 Examples of Use Case Scenarios 17.1.3 Group Replication Details 17.1…...

编程日记 2024/3/5 4:19:57