从源 HTTP localhost:3000 访问 XMLHttpRequest 已被 CORS 策略阻止 - Javascript

在开发前端应用程序时，常常会涉及到跨域请求。由于安全原因浏览器会采取CORS策略（Cross-Origin Resource Sharing，跨域资源共享），来限制跨域请求。

如果你的前端应用程序想要从其他域名下的 API 请求数据，就会遇到跨域请求的瓶颈。一种常见的解决方法是使用代理服务器，但有时候出于某些原因，代理服务器也不是最好的解决方案。

如果你试图利用ajax请求从源HTTP localhost:3000请求数据，你就会看到XMLHttpRequest has been blocked by CORS policy这个错误。这是因为默认情况下，浏览器需要确认请求目标网站是否允许跨域请求。

为了允许跨域请求，我们可以向请求头中添加正确的CORS响应头部，比如 'Access-Control-Allow-Origin'，'Access-Control-Allow-Methods'，'Access-Control-Allow-Headers'等。

以下是一个例子，展示了如何使用CORS来允许跨域请求。该例子中，我们使用了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-Methods", "GET,HEAD,PUT,PATCH,POST,DELETE");
  // 访问控制允许header
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

// 处理跨域请求
app.get('/api/data', (req, res) => {
  // 返回数据
  res.send({data: 'Hello world'});
});

app.listen(3001, () => {
  console.log('CORS-enabled web server listening on port 3001');
});

在你的前端页面中，你可以通过以下方式实现网络请求：

fetch('http://localhost:3001/api/data')
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data)
  })

这段代码可以正常运行，不会出现CORS错误。但请注意，通过在API响应中添加Access-Control-Allow-Origin头来解决CORS问题可能会在一定程度上降低安全性。在实际应用中，需要根据具体情况权衡利弊。