No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的解决方案

当浏览器尝试从不同于其源（域、协议或端口）的服务器加载资源时，会触发同源策略（Same-Origin Policy）。然而，有时我们确实需要从不同的源加载资源，这时就需要使用跨源资源共享（CORS，Cross-Origin Resource Sharing）机制。如果在请求跨域资源时，服务器没有返回Access-Control-Allow-Origin这个HTTP响应头，浏览器就会阻止这个请求，并抛出一个错误，提示“No ‘Access-Control-Allow-Origin’ header is present on the requested resource”。

报错问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
这个错误表明浏览器在尝试跨域请求资源时，由于服务器没有返回正确的CORS响应头，请求被阻止了。

报错原因

服务器未配置CORS：服务器没有正确配置CORS策略，没有返回Access-Control-Allow-Origin响应头，或者返回的响应头值不包含发起请求的页面的源。
预检请求失败：对于非简单请求（如包含自定义HTTP头、非GET/HEAD/POST方法的请求），浏览器会首先发送一个OPTIONS方法的预检请求。如果服务器没有正确处理这个预检请求，也会导致CORS错误。
浏览器安全策略：浏览器出于安全考虑，禁止了跨域请求，除非服务器明确允许。
下滑查看解决方法

解决方法

配置服务器端的CORS策略：在服务器端配置CORS策略，确保对于跨域请求，服务器会返回包含Access-Control-Allow-Origin的响应头。这个响应头的值可以是具体的源地址（如http://example.com），或者是一个通配符*，表示允许任何源进行跨域请求。 例如，在Express.js中配置CORS：
javascript
const express = require(‘express’);
const cors = require(‘cors’);

const app = express();
app.use(cors()); // 使用cors中间件允许所有跨域请求

// … 其他中间件和路由

app.listen(3000, () => {
console.log(‘Server is running on port 3000’);
});
处理预检请求：对于非简单请求，确保服务器能够正确处理OPTIONS方法的预检请求，并返回正确的CORS响应头。
使用代理服务器：如果无法修改服务器端的配置，或者出于某种原因不能设置CORS，可以在客户端和服务器之间设置一个代理服务器。这个代理服务器和服务器位于同一个域，因此可以发起正常的请求到服务器，然后再将结果转发给客户端。
使用CORS插件或工具：在开发过程中，可以使用一些浏览器插件或工具（如CORS Toggle）来临时允许跨域请求，但这只适用于开发环境，不应在生产环境中使用。
使用JSONP：对于GET请求，可以使用JSONP（JSON with Padding）作为一种跨域通信的替代方案。但请注意，JSONP只支持GET请求，并且存在安全风险，因此应谨慎使用。
检查浏览器控制台和服务器日志：查看浏览器控制台和服务器日志，以获取更多关于错误的信息，并据此进行调试。

如果还有什么疑惑欢迎评论区留言或者私信我来帮助你解答，谢谢阅读。