同域名不同端口跨域

基础概念

跨域是指浏览器出于安全考虑，限制从一个源（协议、域名、端口中的任意一个不同）加载的文档或脚本如何与来自另一个源的资源进行交互。同域名不同端口的情况也属于跨域的一种。

类型

同域名不同端口的跨域属于非标准跨域，因为协议和域名相同，只有端口不同。

应用场景

假设你有一个网站运行在 http://example.com:80，而另一个服务运行在同一域名但不同端口 http://example.com:8080。如果你需要在前端页面中访问 http://example.com:8080 上的资源，就会遇到跨域问题。

问题原因

浏览器出于同源策略的限制，不允许从一个端口加载的资源访问另一个端口的资源。

解决方法

1. 使用 CORS（跨域资源共享）

服务器端可以通过设置响应头来允许跨域请求。例如，在 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');
});

2. 使用代理服务器

可以在前端服务器上设置一个代理，将请求转发到目标服务器。例如，在 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。

3. 使用 WebSocket

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);
};