跨域访问指的是在浏览器中,由于浏览器的安全原则(同源策略),访问另一个域名下的数据接口无法直接实现。在发送 Ajax 请求时,如果请求的地址与当前域名不同,就会出现“No ‘Access-Control-Allow-Origin‘ header is present”的错误。
这个错误的原因是浏览器会在发送 AJAX 请求时发送一个预请求,来检查服务器是否支持跨域请求。如果服务器返回的响应中没有包含“Access-Control-Allow-Origin”头信息,则浏览器拒绝接受响应,从而引发上述错误。
要解决这个问题,可以在后端的响应中添加“Access-Control-Allow-Origin”头信息,告诉浏览器可以跨域访问当前域名下的数据。下面是两个示例说明:
- 实现跨域访问:
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格式的响应。
- 在 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 钩子来在组件渲染后自动获取数据。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:No ‘Access-Control-Allow-Origin‘ header is present跨域及解决 - Python技术站