跨域是指浏览器出于安全考虑,限制从一个源(协议、域名、端口中的任意一个不同)加载的文档或脚本如何与来自另一个源的资源进行交互。同域名不同端口的情况也属于跨域的一种。
同域名不同端口的跨域属于非标准跨域,因为协议和域名相同,只有端口不同。
假设你有一个网站运行在 http://example.com:80
,而另一个服务运行在同一域名但不同端口 http://example.com:8080
。如果你需要在前端页面中访问 http://example.com:8080
上的资源,就会遇到跨域问题。
浏览器出于同源策略的限制,不允许从一个端口加载的资源访问另一个端口的资源。
服务器端可以通过设置响应头来允许跨域请求。例如,在 Node.js 中可以使用 cors
中间件:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/data', (req, res) => {
res.json({ message: 'This is data from port 8080' });
});
app.listen(8080, () => {
console.log('Server running on port 8080');
});
可以在前端服务器上设置一个代理,将请求转发到目标服务器。例如,在 Vue.js 项目中可以使用 vue.config.js
配置代理:
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com:8080',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
};
然后在前端代码中可以通过 /api/data
访问 http://example.com:8080/data
。
WebSocket 不受同源策略限制,可以用于跨域通信。
const socket = new WebSocket('ws://example.com:8080');
socket.onopen = () => {
socket.send('Hello Server!');
};
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};
通过以上方法,可以有效解决同域名不同端口跨域的问题。
领取专属 10元无门槛券
手把手带您无忧上云