同源策略（跨域）

同源策略 (Same-Origin Policy)，它默认情况下不允许网页从一个源（origin）的页面请求另一个源的资源。

如网页位于http://127.0.0.1:5500，而尝试从该网页访问http://localhost:8001/api/province，这两者的源是不同的，因此浏览器阻止了该请求。

要解决这个问题，要在服务器端配置跨源资源共享 (CORS) 头，以允许特定源（如http://127.0.0.1:5500）访问您的API。在服务器端添加适当的响应头后，浏览器将允许跨源请求。

  • 方法一：

node.js+express.js配置跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require('express');
const app = express();

// 允许所有源访问，也可以指定特定的源
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 其他路由和处理程序
app.get('/api/province', (req, res) => {
  // 处理请求
});

// 启动服务器
app.listen(8001, () => {
  console.log('Server is running on port 8001');
});

res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')允许http://127.0.0.1:5500源访问后端API。可以根据需要更改允许的源。

  • 方法二

可以使用CORS中间件来更方便地处理CORS配置。安装CORS中间件并将其添加到Express应用程序中，以简化CORS设置：

1
npm install cors

然后在您的服务器代码中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'http://127.0.0.1:5500' // 允许的源
}));

// 其他路由和处理程序
app.get('/api/province', (req, res) => {
  // 处理请求
});

// 启动服务器
app.listen(8001, () => {
  console.log('Server is running on port 8001');
});