renren开源 access control Allow Origin的问题

人人开源前后端分离项目,前端无法访问后台接口,提示如下。

Access to XMLHttpRequest at 'http://localhost:8080/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  1. 我配置@CrossOrigin, 但是没有生效。
    2 .添加了过滤器,还是无法实现跨域。

【以下回答由 GPT 生成】

首先,CORS(跨域资源共享)是一种机制,用于在不同域名之间进行安全的跨域数据传输。当你在前端通过AJAX请求访问后台接口时,出现CORS跨域访问问题,通常是由于后台接口没有正确配置响应头所导致的。

下面是几种可能的解决方案:

1. 添加Access-Control-Allow-Origin响应头

这是最常见的解决方案,通过在后台接口的响应头中添加Access-Control-Allow-Origin,指定允许的来源域名。

示例代码:

@CrossOrigin(origins = "http://localhost:8001")
@RestController
@RequestMapping("/sys")
public class SysController {
    // ...
}

这样配置后,允许http://localhost:8001域名进行跨域访问后台接口。

2. 配置全局的CORS过滤器

如果上述方法无效,你可以尝试配置一个全局的CORS过滤器,无论前端请求哪个后台接口,都会经过该过滤器进行处理。

示例代码:

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpRequest.setCharacterEncoding("UTF-8");
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:8001");
        httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");

        chain.doFilter(request, response);
    }
}

这段代码使用@Component注解将该过滤器注册为组件,@Order注解指定过滤器的执行顺序。在doFilter方法中,我们设置了允许的域名、请求方法、请求头等信息。

3. 使用Nginx进行反向代理

如果你的项目中使用了Nginx作为反向代理服务器,你也可以在Nginx的配置文件中配置CORS相关的头信息。

示例代码:

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        proxy_pass http://localhost:8080;  # 将请求转发给后台服务器
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # 添加下面这行配置
        add_header Access-Control-Allow-Origin http://localhost:8001;
    }
}

在Nginx配置中使用add_header指令添加Access-Control-Allow-Origin头信息,允许指定的域名进行跨域访问。

这些是常见的CORS跨域访问问题的解决方案,希望对你有所帮助。如果以上方法都无效,可能是由于项目其他配置或特殊情况导致,请提供更多的项目细节和配置信息,以便更准确地解决问题。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^