【springboot-web项目跨域问题CORS解决办法】在同一个局域网的网络下,将自己电脑作为服务器,他人电脑通过局域网内的ip和url进行访问

导读:本篇文章讲解 【springboot-web项目跨域问题CORS解决办法】在同一个局域网的网络下,将自己电脑作为服务器,他人电脑通过局域网内的ip和url进行访问,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

自行研究:

起因:

今天在学习的过程中,因为要实现前后端数据的连接,所有我们通过url对同一个局域网下开启的服务器进行数据传送,但是过程中也遇到了问题,经过了一顿修整后,才发现这种属于跨域问题(CORS)

实现逻辑:

逻辑是这样的:我这边写后端,另一位同学写前端,我们都在自己的电脑上创建好了自己的maven的springboot项目,在双方都启动了对应的本地服务器后,我们能够通过浏览器的对方的ip地址(替代访问本地时使用的localhost)拿到对应的数据内容:

相应的效果展示:

后端同学通过ip访问前端同学开启的服务器的html页面:
在这里插入图片描述
前端同学也能通过ip地址访问后端同学开启的服务器内容返回对应的测试数据内容(json格式):
在这里插入图片描述
但是上面的方式 都是一个客户端分别到两个服务器的访问方式,而我们要实现的是,前端同学将后端同学的链接写进axios发送请求的url中(两台服务器ip不一样),然后实现交互,这样就能在两台电脑上两个同学一起一边编程一边测试对应的数据接口(多人多线操作实时交换数据想着还挺美好的)

但当通过已经加载前端同学服务器的内容后,实现网页内访问后端 同学的url,但是出现错误,且html页面控制台提示CORS policy不通过:
跨域无法实现
这里的CORS就是相应的跨域问题(待解决问题)

自己找到的跨域问题解决办法:

如何实现跨域(跨服务器访问)

我找到的这篇文章实现的解决办法:
https://blog.csdn.net/qiuqiu1628480502/article/details/85289894

它的思想就是: 通过拦截器 在访问controller的RequestMapping前先执行拦截器中的内容设置对应的header的请求头,从而实现跨域
在这里插入图片描述
两个文件的内容如下:
Filter 拦截器文件内容如下:

package myweb.filter;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")
public class corsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest reqs = (HttpServletRequest) req;
        String curOrigin = reqs.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
        System.out.println("=======================================================chulaile=================================================");
    }
    @Override
    public void destroy() {}
}

webconfigure文件内容如下:

package itheima.configure;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurationSupport {
   @Configuration
    public class CorsConfig  extends WebMvcConfigurerAdapter {

        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                    .allowCredentials(true).maxAge(3600);
        }
    }
}

最终实现的数据请求:

在controller中实现访问到时数据返回:
在这里插入图片描述
通过前端同学的服务器的内容对自己的html页面访问后(此时处于前端同学的服务器中),通过页面的按钮触发对应的axios请求访问后端并返回的数据内容(成功实现数据交换):
在这里插入图片描述

后记 有惊喜 老师给的解决办法:

10年开发经验的大佬给的解决办法:
在这里插入图片描述
下午问的老师,我也是被惊呆了,springboot里面它将跨域问题封装成为了一个注解@CrossOrigin 呃,老实说封装了注解确实很方便了(奈何自己知道得太少)

要实现跨域的访问controller加上这个注解后即可实现跨域,已测试过,能实现多个服务器之间的跨域,效果和前面展示的一样 均能返回数据给前台

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/114566.html

(0)
Java光头强的头像Java光头强

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!