ZBLOG

react如何解决Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题

要解决 React 中的 CORS(跨域资源共享)问题,通常需要从后端服务器进行配置。以下是几种常用的方法来处理这个问题:

1. 在后端启用 CORS

你需要在你的后端服务中添加适当的 CORS 头部,以允许来自特定源的请求。以下是一些流行框架的示例代码:

Node.js (Express)

如果你使用 Express.js,可以使用 cors 中间件:

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

const app = express();

// 启用 CORS
app.use(cors());

// 或者可以指定允许的来源
// app.use(cors({ origin: 'http://localhost:3000' }));

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

app.listen(700, () => {
    console.log('Server running on http://192.168.1.234:700');
});

Spring Boot

如果你使用 Spring Boot,可以在控制器或全局配置类中添加 CORS 支持:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 指定路径
                .allowedOrigins("http://localhost:3000") // 指定允许访问的源
                .allowedMethods("GET", "POST", "PUT", "DELETE"); // 指定允许的方法
    }
}

2. 使用代理

如果你无法修改后端代码,在开发过程中可以在 React 应用中设置代理。例如,如果你的应用是通过 create-react-app 创建的,可以在 package.json 中添加一个代理字段:

"proxy": "http://192.168.1.234:700"

然后,当你发起请求时,直接使用相对路径,例如 /api/all,而不需要完整 URL。

3. 使用浏览器插件

作为一种临时解决方案,你也可以在浏览器中使用扩展程序(如 Chrome 的 “CORS Unblock”)来禁用 CORS。不过,这仅适用于开发阶段,不建议在生产环境中使用。

4. JSONP(不推荐)

JSONP 是一种旧技术,可以绕过 CORS,但只支持 GET 请求,并且有安全风险,因此一般不推荐。

总结

最佳做法是在后端正确配置 CORS,以确保客户端能够安全地与其通信。如果没有权限修改服务器设置,您可以考虑代理或其他替代方法。希望这些信息能帮助到你!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19074

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?