二级域名不同算跨域
基础概念
跨域是指浏览器为了安全考虑，限制从一个源（协议、域名、端口）加载的文档或脚本如何与来自另一个源的资源进行交互。如果一个请求的源和当前页面的源不同，浏览器就会阻止这个请求，这就是所谓的“同源策略”。
二级域名不同的情况
假设我们有两个域名：
example.comsub.example.com
尽管它们属于同一个顶级域名（example.com），但由于二级域名不同，浏览器会认为它们是不同的源。
为什么会出现跨域问题
当你在 sub.example.com 上的页面尝试访问 example.com 上的资源时，浏览器会阻止这个请求，因为它们属于不同的源。这会导致跨域问题。
解决跨域问题的方法
1. CORS（跨域资源共享）
CORS 是一种机制，它使用额外的 HTTP 头来告诉浏览器，允许在一个域名的网页应用访问另一个域名下的资源。
服务器端设置示例（Node.js + Express）：
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
app.get('/data', (req, res) => {
res.json({ message: 'This is data from example.com' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});参考链接：
2. JSONP（JSON with Padding）
JSONP 是一种通过 <script> 标签绕过同源策略的方法。它利用了 <script> 标签没有跨域限制的特性。
客户端示例：
<!DOCTYPE html>
<html>
<head>
<title>JSONP Example</title>
</head>
<body>
<script>
function handleResponse(data) {
console.log(data);
}
</script>
<script src="http://example.com/data?callback=handleResponse"></script>
</body>
</html>服务器端示例（Node.js + Express）：
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const callback = req.query.callback;
const data = { message: 'This is data from example.com' };
res.send(`${callback}(${JSON.stringify(data)})`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});参考链接：
3. 代理服务器
通过设置一个代理服务器，将跨域请求转发到目标服务器，从而绕过浏览器的同源策略。
客户端示例：
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));服务器端示例（Node.js + Express + http-proxy-middleware）：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({
target: 'http://example.com',
changeOrigin: true
}));
app.listen(3000, () => {
console.log('Proxy server running on port 3000');
});参考链接：
应用场景
跨域问题常见于以下场景：
- 前端开发：当你在不同的子域名下开发应用时，需要访问其他子域名下的资源。
- API 请求：前端应用需要从不同的域名获取数据。
- 微服务架构：不同的微服务可能部署在不同的域名下，需要进行跨域通信。
总结
二级域名不同会导致跨域问题，解决跨域问题的方法包括 CORS、JSONP 和代理服务器。选择哪种方法取决于具体的应用场景和需求。
相关·内容
8分7秒
为什么后端要配置跨域？
1.2K0
6分53秒
41.后台系统-跨域问题
3720
5分53秒
14. 尚硅谷_面试题_跨域.avi
3450
10分56秒
86.后台系统-整合gateway网关和解决跨域
3820
6分53秒
41-尚硅谷-硅谷课堂-后台系统-跨域问题
480
9分53秒
30.尚硅谷_AJAX-设置CORS响应头实现跨域
410
8分9秒
20_尚硅谷_Vue项目_配置代理实现跨域ajax请求.avi
3690
10分56秒
86-尚硅谷-硅谷课堂-后台系统-整合gateway网关和解决跨域
350
7分49秒
39_尚硅谷_React全栈项目_jsonp解决ajax跨域的原理
350
3分27秒
2.3 如何配置跨域头响应仅允许指定的域名访问页面资源
9460
16分52秒
47、商品服务-API-三级分类-网关统一配置跨域
410
6分9秒
139_尚硅谷_React全栈项目_生产环境打包项目运行_无跨域
320
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
