什么是浏览器同源策略？如何处理同源策略带来的跨域问题？

demo1235672023-07-23 8:52

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

什么是浏览器同源策略

浏览器的同源策略（Same-Origin Policy）是一种安全机制，用于限制一个网页文档或脚本如何与来自不同源的资源进行交互。同源是指两个 URL 的协议、主机和端口号都相同。

同源策略的目的是保护用户的隐私和安全。它可以防止恶意网站通过脚本访问其他网站的敏感信息或进行恶意操作。同源策略主要限制以下几个方面的交互：

  1. 跨域资源读取：在浏览器中，一个网页只能通过 AJAX、WebSocket 或 Fetch API 等方式来请求同源网站的数据。这意味着脚本无法直接读取来自其他域的数据，以防止恶意网站获取用户的敏感信息。

  2. 跨域资源加载：浏览器中的脚本无法直接加载来自其他域的资源，如 JavaScript 文件、CSS 文件或字体文件。这是为了防止恶意脚本篡改其他域的资源或执行恶意代码。

  3. 跨域窗口通信：浏览器中的脚本只能与同源窗口进行通信，不能直接操作或获取来自其他域的窗口对象的内容。

同源策略通过限制不同源之间的交互，提高了浏览器的安全性。然而，有时需要在不同源之间进行数据交换，为此引入了一些跨域解决方案，如跨域资源共享（CORS）和跨文档消息传递（PostMessage）。这些解决方案允许在特定条件下进行跨域交互，同时保持了一定的安全性。

如何解决跨域问题

跨域问题是由浏览器的同源策略所引起的，它限制了不同源（协议、域名、端口）之间的资源交互。要解决跨域问题，可以采取以下几种方法：

  1. JSONP（JSON with Padding）：JSONP是一种利用<script>标签不受同源策略限制的特性来实现跨域请求的方法。通过在请求URL中添加一个回调函数参数，服务器返回的响应将被包裹在该函数中，从而实现跨域数据的获取。不过用的少。
    下面是一个简单的示例，演示如何使用 JSONP 进行跨域数据获取：

假设网页位于 http://www.example.com，希望从跨域的服务器 http://api.example.com 获取数据。

  1. 在客户端的 HTML 页面中添加以下代码：
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
    <script>
        function handleResponse(data) {
            console.log(data); // 在控制台中打印获取到的数据
        }
    </script>
</head>
<body>
    <script src="http://api.example.com/data?callback=handleResponse"></script>
</body>
</html>

在这个例子中，在页面中定义了一个名为 handleResponse 的函数来处理获取到的数据。然后通过添加 <script> 标签来请求跨域服务器上的数据，并在 URL 的查询参数中指定回调函数的名称为 handleResponse。

  1. 在跨域服务器 http://api.example.com 上，根据请求的 URL 参数返回相应的数据。服务器端代码可以是以下示例（使用 Node.js 和 Express 框架）：
javascript 复制代码 
const express = require('express');
const app = express();

app.get('/data', (req, res) => {
    const data = { message: 'Hello, World!' };
    const callbackName = req.query.callback; // 获取回调函数名称

    // 返回数据，并将数据包裹在回调函数中
    res.send(`${callbackName}(${JSON.stringify(data)})`);
});

app.listen(80, () => {
    console.log('Server started');
});

在这个例子中，当客户端发起 GET 请求到 /data 路由时，服务器获取回调函数的名称，然后将数据包裹在回调函数中作为响应返回给客户端。

通过这种方式，客户端就能够从跨域服务器上获取数据，并在指定的回调函数中进行处理。

例子仅供参考

  1. CORS（Cross-Origin Resource Sharing）：CORS是一种在服务器端配置的解决方案。通过在响应头中添加特定的跨域策略信息，允许浏览器在跨域请求时获取和处理来自其他域的数据。服务器需要设置适当的Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头来指定允许的跨域访问规则。

    以下是一个示例，演示如何使用CORS来允许跨域访问：

    假设网页位于 http://www.example.com，希望从跨域的服务器 http://api.example.com 获取数据。

  2. 在服务器端配置允许跨域访问的规则。具体的配置方式取决于服务器端的语言和框架。以下示例是使用 Node.js 和 Express 框架来配置CORS。

javascript 复制代码 
const express = require('express');
const app = express();

// 配置CORS中间件
app.use(function(req, res, next) {
    // 允许特定域的跨域访问
    res.header('Access-Control-Allow-Origin', 'http://www.example.com');
    // 允许发送跨域请求的HTTP方法
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    // 允许的请求头
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    // 是否允许发送Cookie
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

// 跨域请求处理
app.get('/data', (req, res) => {
    const data = { message: 'Hello, World!' };
    res.send(data);
});

app.listen(80, () => {
    console.log('Server started');
});

在这个例子中，使用了 Express 框架，并在服务器端配置了一个中间件来处理CORS。在中间件中，我们设置了允许跨域访问的源（http://www.example.com）、允许的HTTP方法（GET、POST、PUT、DELETE）、允许的请求头（Content-Type）和是否允许发送Cookie。这样就允许了来自指定域名的跨域访问。

  1. 在客户端的 JavaScript 代码中，可以使用AJAX或Fetch API等方式发送跨域请求：
javascript 复制代码 
fetch('http://api.example.com/data', {
    method: 'GET',
    credentials: 'include' // 发送包含Cookie的请求
})
    .then(response => response.json())
    .then(data => {
        console.log(data); // 在控制台中打印获取到的数据
    })
    .catch(error => {
        console.error('Error:', error);
    });

在这个例子中，使用了Fetch API来发送GET请求到跨域服务器的 /data 路由，并通过 credentials: 'include' 选项来发送包含Cookie的请求。然后通过 response.json() 方法解析响应数据。

通过这种方式，客户端就能够通过CORS允许的方式与跨域服务器进行交互，获取数据并进行处理。例子仅供参考

  1. 代理服务器：可以设置一个代理服务器，将跨域请求转发到目标服务器并将响应返回给客户端。客户端向代理服务器发出请求，代理服务器再将请求发送到目标服务器，然后将响应返回给客户端。因为同源策略只存在于浏览器中，而代理服务器是在服务器端进行请求转发，所以不会受到同源策略的限制。

以下是一个使用代理服务器解决跨域问题的例子：

假设我们的前端应用运行在http://localhost:3000，而我们想要请求的跨域API位于http://api.example.com。

  1. 在后端设置一个代理服务器来转发请求。以下是一个使用Node.js和Express框架实现的例子：
javascript 复制代码 
const express = require('express');
const request = require('request');

const app = express();

// 设置代理路由
app.get('/api/data', (req, res) => {
  const apiUrl = 'http://api.example.com/data'; // 目标API的URL

  // 转发请求到目标API
  req.pipe(request(apiUrl)).pipe(res);
});

app.listen(8000, () => {
  console.log('Proxy server started');
});

在上述示例中，创建了一个代理服务器，将 /api/data 路由映射到目标 API 的 URL (http://api.example.com/data)。通过使用 request 模块将请求从代理服务器转发到目标 API，并将响应返回给前端应用。

  1. 在前端应用中发起请求。假设使用 Axios 进行网络请求，可以将请求发送到代理服务器的对应路由，如下所示：
javascript 复制代码 
import axios from 'axios';

axios.get('http://localhost:8000/api/data')
  .then(response => {
    console.log(response.data); // 在控制台中打印获取到的数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中，向代理服务器的 /api/data 路由发送 GET 请求，代理服务器会将该请求转发到目标 API (http://api.example.com/data)，然后将响应返回给前端应用。

  1. WebSocket：WebSocket 是一种全双工通信协议，它可以在客户端和服务器之间建立持久性的连接，实现实时数据传输。由于 WebSocket 是在单个 HTTP 连接上运行的，而不受同源策略的限制，因此可以解决跨域通信的问题。

  2. 使用反向代理：在服务器端配置一个反向代理，将所有的请求转发到目标服务器。客户端与反向代理进行通信，而反向代理与目标服务器之间是同源的，因此不会受到同源策略的限制。

以下是一个使用反向代理解决跨域问题的例子：

假设前端应用运行在 http://localhost:3000，而想要请求的跨域 API 位于 http://api.example.com。

  • 在反向代理服务器上配置代理规则。可以使用常见的反向代理服务器，如Nginx或Apache。以下是一个使用Nginx的示例配置：
nginx 复制代码 
server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

在上述示例中，配置了一个Nginx服务器，监听在80端口，并定义了两个代理规则。/api/ 路径下的请求将被转发到目标 API (http://api.example.com/)，而其他所有请求将被转发到前端应用 (http://localhost:3000)。

  • 启动反向代理服务器。根据你的环境和配置方式，启动配置好的反向代理服务器。

  • 在前端应用中发送请求。前端应用可以直接发送请求到反向代理服务器，而不需要关心跨域问题。例如，使用Axios发送请求的示例代码如下：

javascript 复制代码 
import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // 在控制台中打印获取到的数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中，将请求发送到反向代理服务器的 /api/data 路径，反向代理服务器会将该请求转发到目标 API (http://api.example.com/)，然后将响应返回给前端应用。

React、Vue项目中如何解决跨域问题

在大型项目中，使用React、Vue或其他框架集成的方式，通常会有不同的方法来解决跨域问题。以下是一些常见的解决方案：

  1. 在React项目中，可以使用http-proxy-middleware等中间件来配置代理。以下是一个示例：
javascript 复制代码 
// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api.example.com', // 目标服务器的URL
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', // 可选，用于重写路径
      },
    })
  );
};

在上述示例中，将所有以/api开头的请求代理到目标服务器http://api.example.com。可以根据实际情况进行配置。

  1. 在Vue项目中，可以在vue.config.js中配置代理。以下是一个示例：
javascript 复制代码 
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 目标服务器的URL
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 可选，用于重写路径
        },
      },
    },
  },
};
相关推荐
可缺不可滥4 分钟前
前端 性能优化 （图片与样式篇）
前端·性能优化
Bug从此不上门6 分钟前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图20934 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉39 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始：春节门联网页设计，用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
前端·css·html
Coisini_甜柚か2 小时前
打字机效果显示
前端·vue3·antv
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍（基础介绍 二）
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时，如何处理和捕获错误？
前端·javascript·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05RAG 实践- Ollama+RagFlow 部署本地知识库06Windows10安装PCL1.14.0及点云配准07全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Coze扣子平台完整体验和实践（附国内和国际版对比）10Unity中PICO实现 隔空取物 和 接触抓取物体