正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法

正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法

报错问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常

报错原因

该异常信息"No ‘Access-Control-Allow-Origin’ header is present on the requested resource"表明您在进行跨域HTTP请求时遇到了CORS（Cross-Origin Resource Sharing，跨源资源共享）策略限制。在Web浏览器中，出于安全原因，一个网页上的脚本默认不能跨域请求另一个域名下的资源。当尝试这样做时，如果没有适当的CORS响应头，浏览器会阻止请求的响应，从而引发此错误。

CORS机制通过在服务器端设置特定的HTTP响应头来允许或拒绝来自特定源的跨域请求。特别地，Access-Control-Allow-Origin头是关键之一，它指定了哪些网站可以请求该资源。如果服务器没有在响应中包含此头，或者该头的值没有匹配到发出请求的源，浏览器就会抛出上述错误。

下滑查看解决方法

解决方法

要解决这个问题，通常需要在服务器端进行配置，以便在响应中加入适当的CORS头。以下是一些基本的解决办法：

1.对于开发环境：如果您控制着服务器或者是在开发阶段，可以通过在服务器的响应中添加Access-Control-Allow-Origin头来允许所有来源的请求。请注意，这在生产环境中可能不安全，因为它允许任意网站访问您的资源。

例如，在Node.js的Express框架中，可以这样设置：

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    next();
});

2.对于生产环境：应精确指定允许访问的源，而不是使用通配符*。如果您的应用部署在特定的域名下，只应允许来自那个域名的请求：

res.setHeader('Access-Control-Allow-Origin', 'https://your-allowed-origin.example.com');

3.配置代理：如果您无法直接修改服务器配置，且是在开发环境下遇到此问题，可以使用前端开发工具（如webpack的devServer或使用CORS代理服务器）来代理请求，绕过浏览器的同源策略限制。

4.特定于前端的解决方案：虽然这不是根本解决办法，但在某些测试或特殊情况中，可以使用JSONP或者在开发环境下关闭浏览器的安全策略（但这不适用于生产环境，且有安全风险）。

确保实施适合您应用场景的安全策略，并且理解CORS的原理和最佳实践，以避免安全漏洞。

以上内容仅供参考，具体问题具体分析，如果对你没有帮助，深感抱歉。