No ‘Access-Control-Allow-Origin‘ header is present跨域及解决

跨域访问指的是在浏览器中，由于浏览器的安全原则（同源策略），访问另一个域名下的数据接口无法直接实现。在发送 Ajax 请求时，如果请求的地址与当前域名不同，就会出现“No ‘Access-Control-Allow-Origin‘ header is present”的错误。

这个错误的原因是浏览器会在发送 AJAX 请求时发送一个预请求，来检查服务器是否支持跨域请求。如果服务器返回的响应中没有包含“Access-Control-Allow-Origin”头信息，则浏览器拒绝接受响应，从而引发上述错误。

要解决这个问题，可以在后端的响应中添加“Access-Control-Allow-Origin”头信息，告诉浏览器可以跨域访问当前域名下的数据。下面是两个示例说明：

1. 实现跨域访问：

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.get('/data', (req, res) => {
    res.json({data: 'Hello World!'});
});

app.listen(3000, () => {
    console.log('Server is running at port 3000');
});

这个例子使用了 Express 框架，通过在响应头中添加“Access-Control-Allow-Origin”信息，来允许任意来源的请求。同时，还提供了一个/data接口，返回一个包含“Hello World!”数据的JSON格式的响应。

1. 在 React 中实现跨域访问：

import React, {useState, useEffect} from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    fetch('http://localhost:3000/data')
      .then(res => res.json())
      .then(data => setData(data.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
}

export default App;

这个例子中的 React 应用从 http://localhost:3000/data 接口获取数据，并将数据显示在页面上。由于这个请求和应用本身不在同一个域名下，因此需要在服务器端添加“Access-Control-Allow-Origin”信息来允许请求。这个例子中使用了 React Hooks 来发送请求，并使用了 useEffect 钩子来在组件渲染后自动获取数据。